<!-- 新增线下订单-->
<template>
  <view class="content">
    <view style="width: 100%; height: 44px;"></view>
    <view class="top-heder">
      <view class="t-left" @click="getback()">
        <uni-icons type="left" size="18"></uni-icons>
      </view>
      <view class="t-title">
        <text>{{ title }}</text>
      </view>
      <view class="t-you"></view>
    </view>

    <view class="mub">
      <view class="top-ail">

        <!-- 名称 -->

        <view class="box-list">
          <view class="list-box">
            <view class="l-left">编号</view>
            <view class="l-right">
              <input type="text" v-model="data.id" placeholder="请输入编号">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">检验报告编号</view>
            <view class="l-right">
              <input type="text" v-model="data.reportId" placeholder="请输入检验报告编号">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">客户姓名</view>
            <view class="l-right">
              <input type="text" v-model="data.userName" placeholder="请输入客户姓名">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">车牌号</view>
            <view class="l-right">
              <input type="text" v-model="data.carNum" placeholder="请输入车牌号">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">VIN码</view>
            <view class="l-right">
              <input type="text" v-model="data.vin" placeholder="请输入VIN码">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">年份</view>
            <view class="l-right">
              <input type="text" v-model="data.year" placeholder="请输入年份">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">月份</view>
            <view class="l-right">
              <input type="text" v-model="data.month" placeholder="请输入月份">
            </view>
          </view>
          <view class="list-box">
            <view class="l-left">日</view>
            <view class="l-right">
              <input type="text" v-model="data.day" placeholder="请输入日">
            </view>
          </view>
          <view class="list-box">
            <u-checkbox-group
                v-model="data.checkboxValue"
                placement="column"
                @change="checkboxChange"
            >
              <u-checkbox
                  :customStyle="{marginBottom: '8px'}"
                  v-for="(item, index) in radiolist1"
                  :key="index"
                  :label="item.name"
                  :name="item.name"
              >
              </u-checkbox>
            </u-checkbox-group>
          </view>
        </view>


        <view class="dlanniu" @click="submit()">
          <text>确认生成</text>
        </view>

      </view>
    </view>

    <!-- 底部 -->


  </view>
</template>

<script>
import config from '@/config';
import request from '../../utils/request';
import upload from '@/utils/upload.js'
import {getToken, getTenantId} from '@/utils/auth'

export default {
  data() {
    return {
      imagePath: '',
      fileList: [],
      title: '维护修理告知书',
      customerSource: '',
      data: '',
      buyName: '',
      nickname: '',
      buyPhone: '',
      userAddress: '',
      carNum: '',
      carStatus: '',
      carIdNo: '',
      radioValue: '0',
      carModel: '',
      carNature: '',
      show: false,
      shownature: false,
      showgoods: false,
      showxin: false,
      showzhi: false,
      showRecord: false,
      showLeadMan: false,
      skuId: 0,
      inspectionWorkNodes: [],
      defaultIndex: [0],
      kehuDefaultIndex: [0],
      goodsDefaultIndex: [0, 0],
      columns: [],
      options: [],
      nature: [],
      goodsone: [],
      goodstwo: [],
      columnData: [],
      xinlist: [],
      zhilist: [],
      recordTime: Number(new Date()),
      baseUrl: this.$baseImageUrl,
      goodsId: '',
      msg: '3',
      tapnum: 0,
      fenlist: [],
      goodstext: '',
      ftitle: null,
      shopImages: [],
      shoplist: {},
      province: '',
      unitName: '',
      kehui: '',
      naturetext: '',
      customerData: [],
      inspectionWorkNodeStr: "",
      leadManId: undefined,
      leadManList: [],
      isInsert: true,
      inspectionId: undefined,
      submitRecordTime: undefined,
      xinDefaultIndex: [0],
      recordTimeStr: '',
      // 基本案列数据
      radiolist1: [{
        name: '《汽油车污染物排放限值及测量方法（双怠速法及简易工况法）》( GB 18285-2018)',
        disabled: false,
        label:'one'
      },
        {
          name: '柴油车污染物排放限值及测量方法（自由加速法及加载加速法）》( GB 3847-2018）规定的在用',
          disabled: false,
          label:'two'
        },
        {
          name: '汽油车',
          disabled: false
          , label:'three'
        }, {
          name: '柴油车污染物排放限值要求',
          disabled: false
          , label:'four'
        }
      ],
    }
  },
  onLoad(options) {
    if (options.inspectionInfoId) {
      this.inspectionInfoId = options.inspectionInfoId
      this.getData()
    }
  },
  onShow() {

  },

  methods: {
    getData() {
      request({
        url: '/system/info/getWordContent',
        method: 'get',
        params: {
          id: this.inspectionInfoId
        }
      }).then(res => {
        this.data = res.data
      })
    },
    getback(){
      uni.navigateBack()
    },
    checkboxChange(n) {
    },
    async submit() {
      this.radiolist1.forEach(item => {
        const flag = this.data.checkboxValue.indexOf(item.name) > -1 ? true :  false
        if (flag) {
          this.data[item.label] = "√"
        }else {
          this.data[item.label] = "□"
        }
      })
      request({
        url: '/system/info/exportWord',
        method: 'post',
        data: this.data
      }).then(res => {
        console.log('word地址',this.$baseImageUrl + "/" + res.data)
      })

    },

    // 提交
    async getgoods() {

      let res = await request({
        url: '/partnerOwn/partner/editPartnerInfo',
        method: 'post',
        data: this.shoplist
      })
      if (res.code == 200) {
        uni.showToast({
          title: "修改成功"
        })
      }
      setTimeout(() => {
        uni.navigateBack()
      }, 2000);
    },
  },
  computed: {
    checkboxLabelClass() {
      return 'checkbox-label';
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh);
  background: white;
}

.top-heder {
  width: 100%;
  height: 46px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 15px;
}

.t-title {
  font-size: 17px;
  font-weight: bold;
  color: #333333;
}

.checkbox-label {
  word-wrap: break-word;
  word-break: break-all;
}

.t-left {
  width: 10%;
}

.t-you {
  height: 100%;
  width: 20%;
}

.t-input {
  width: 80%;
  height: 36px;
  background: #F0F0F0;
  border-radius: 50px;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  align-items: center;

}

.top-ail {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #F4F4F4;
  // height: calc(100vh);
}

.mub {
  background-color: #F4F4F4;
  height: calc(100vh);
}

.dix {
  display: flex;
  align-items: center;
}

.upimg {
  width: 100%;
  height: 126px;
  border-radius: 8px;
  box-sizing: border-box;

  background-color: white;

  image {
    width: 100%;
    height: 100%;
  }
}

.box-list {
  width: 100%;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 10px;
  background-color: white;
  margin: 10px auto;
}

.list-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 15px 5px;
  border-bottom: 1px solid #EEEEEE;
}

.l-left {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
}

.l-right {
  font-size: 16px;
  font-weight: 400;
  color: #999999;
  text-align: right;
}

.xiaolan {
  // width: 109px;
  // height: 30px;
  background: #E2EAFF;
  border-radius: 50px;
  display: flex;
  align-content: center;
  justify-self: center;
  box-sizing: border-box;
  padding: 5px;
  font-size: 14px;
  font-weight: 400;
  color: #0D2E8D;
}

.xiaohui {
  // width: 141px;
  // height: 30px;
  box-sizing: border-box;
  padding: 0px 10px;
  background: #F7F7F7;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;

}

.hui-right {
  border-left: 1px solid #DDDDDD;
  padding: 5px;
  margin-left: 5px;
}

.wrap-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.bottom-di {
  width: 100%;
  height: 56px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 20px;
  margin-bottom: 10px;
}

.thui {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  margin-top: 10px;
  margin-left: 8px;
}

.imgs {
  box-sizing: border-box;
  margin-top: 20px;
}

.p-box {
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  background-color: white;
}

.p-top {
  width: 100%;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 20px;
}

.on-input {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;

}

.ipt-kuang {
  width: 70%;
  height: 30px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #DDDDDD;
  display: flex;
  align-items: center;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 0px 10px;
}

.t-left {
  width: 20%;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}

.dlanniu {
  width: 80%;
  height: 45px;
  background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  color: white;
}

.da {
  font-size: 16px;
}

//
.top {
  box-sizing: border-box;
  padding: 0px 15px;
  width: 100%;
  border-radius: 10px;
  margin: 10px auto;
  background-color: white;
}

.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 20px 0px;
}

.tb-left {
  height: 100%;
  width: 80%;
  display: flex;
  align-items: center;
}

.uicon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: white;
  background: orangered;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  margin-right: 6px;
}

.tb-right {
  width: 20px;
  height: 26px;

  image {
    width: 100%;
    height: 100%;
  }
}

.text1 {
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}

.hong1 {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: #FF5453;
}

.hong2 {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;

}

.tinput {
  width: 100%;
  display: flex;
  background: white;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 16px;
  margin-top: 14px;
}

.xixi {
  font-size: 12px;
  color: #0D2E8D;
  margin-left: 10px;
}
</style>