<template>
  <el-dialog
    title="修改质检报告"
    :visible.sync="editshow"
    width="1500px"
    top="5vh"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div class="main">
      <div style="margin-left:10px;background:#f1f2f6;height:30px;display:flex;align-items:center;color: #000;padding: 0 30px;">
        质检信息
      </div>
      <div>
        <el-row type="flex" style="display: flex;align-items: center;margin-top: 10px;padding: 0 30px;" justify="">
          <el-col :span="12">归属地区:浙江省温州市鹿城区</el-col>
          <el-col :span="12">服务标签:<el-tag style="margin-left:5px">七天包退</el-tag><el-tag style="margin-left:5px">一年质保</el-tag></el-col>
        </el-row>
      </div>
      <div v-show="attributeform['unmatch'] && attributeform['unmatch'].length !=0" class="tip">
        <span>质检报告异常:</span>
        <el-row :gutter="10">
          <!-- <el-col :span="12">质检报告异常:</el-col> -->
          <el-col v-for="(item,i) in attributeform['unmatch']" :key="i" :span="8">{{ item.attr_name }}/</el-col>
        </el-row>
      </div>
      <!-- 质检图片 -->
      <div style="margin-top:10px">
        <div style="margin-left:10px;background:#f1f2f6;height:30px;display:flex;align-items:center;color: #000;padding: 0 30px;">
          质检图片
        </div>
        <div style="display:flex;margin-top:10px">
          <el-image
            v-for="(item,i) in attributeform.all_img"
            :key="i"
            style="width: 100px; height: 100px;margin:10px"
            :src="item"
            :preview-src-list="attributeform.all_img"
          />
        </div>
      </div>
      <!-- 质检信息 -->
      <div>
        <div style="margin-left:10px;background:#f1f2f6;height:30px;display:flex;align-items:center;color: #000;padding: 0 30px;">
          质检信息
        </div>
        <vxe-table
          ref="xTable"
          border
          resizable
          style="width: 100%;margin-top:10px"
          :data="tableData"
          :show-header="false"
          auto-resize
          :span-method="mergeRowMethod2"
          height="500"
          :checkbox-config="{labelField: 'Serial', highlight: false, range: true}"
        >
          <vxe-table-column
            v-for="(item,index) in tableLabel"
            :key="index"
            :field="item.param"
            :title="item.label"
            :align="item.align"
            :min-width="item.width"
            :width="item.width"
          >
            <template v-slot:default="{ row, rowIndex }">
              <span v-if="item.param == 'value' && row['child'].length>1">
                <div style="display:flex;align-items:center">
                  <div v-for="(e,i) in row['child']" class="btnclass" style="margin:10px">
                    <el-button v-if="row['attr_name'].indexOf('多选')!=-1" :disabled="attributeform.type==1 ?true :false" class="buttonDiv" plain round :type="row['value'].includes(e.attr_name) ? 'primary' :''" style="width: 100%;" @click="brandclick($event,e,row['attr_name'],row)">{{ e.attr_name }}</el-button>
                    <el-button v-else-if="row['attr_name'].indexOf('多选')==-1" :disabled="attributeform.type==1 ?true :false" class="buttonDiv" plain round :type="row['value']==e.attr_name ? 'primary' :''" style="width: 100%;" @click="brandclick($event,e,row['attr_name'],row)">{{ e.attr_name }}</el-button>
                    <!-- <span v-if="e.attr_name == '循环次数' && row['value']=='苹果电池循环次数'">
                                  <el-input v-model="row['value']" placeholder="请输入内容" clearable ></el-input>
                                </span> -->
                  </div>
                </div>
              </span>
              <span v-else-if="item.param == 'value' && row['child'].length==1">
                <el-input v-model="row['value']" placeholder="请输入内容" :disabled="attributeform.type==1 ?true :false" clearable />
              </span>
              <span v-else>
                {{ row[item.param] ? row[item.param] : '/' }}
              </span>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">关闭</el-button>
      <el-button v-if="!attributeform.type" type="primary" @click="editinfo">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
import printJS from 'print-js'
import QRCode from 'qrcodejs2'
import { save_xy_attribute } from '@/api/console' // 获取客户信息接口
import { res_advanced_search } from '@/api/machineList' // 获取机器列表信息接口
import { pre_print } from '@/api/machineList' // 获取列表信息接口
import { op_order_details_code } from '@/api/Warehousing' // 获取二维码信息接口
import { mapGetters } from 'vuex'
export default {
  name: 'Warehousingprint',
  data() {
    return {
      gridOptions2: {
        border: false,
        showOverflow: false,
        height: 400,
        showHeader: false,
        columns: [],
        data: []
      },
      tableLabel: [
        { label: '', param: 'title', align: 'center', width: 100, show: true },
        { label: '', param: 'attr_name', align: 'center', width: 200, show: true },
        { label: '', param: 'value', align: 'center', width: 1500, show: true }
      ],
      tableData: [],
      warranty_query: 2,
      form: { cate_id: null, brand_id: null, model_id: null, rom_id: null, color_id: null },
      cate_options: [],
      brand_options: [],
      model_options: [],
      rom_options: [],
      customer_options: [],
      quote_user_options: [],
      grade_options: [],
      network_options: [],
      op_user_id_options: [],
      countries_options: [// 国别
        { label: '中国', value: '中国' },
        { label: '国行运营商', value: '国行运营商' },
        { label: '国行全网通', value: '国行全网通' },
        { label: '海外', value: '海外' },
        { label: '美版', value: '美版' },
        { label: '日本', value: '日本' },
        { label: '韩版', value: '韩版' },
        { label: '港澳台', value: '港澳台' },
        { label: '新加坡', value: '新加坡' },
        { label: '欧盟', value: '欧盟' },
        { label: '国际版', value: '国际版' }],
      id_options: [
        { label: '有', value: 1 },
        { label: '无', value: 2 },
        { label: '未知', value: 0 }]
    }
  },
  computed: {
    ...mapGetters([
      'is_warranty_query', // 1查询，2不查询
      'user_id'
    ]),
    date() {
      var date = new Date()
      return date.toLocaleDateString()
    },
    aaa() {
      const obj = JSON.parse(JSON.stringify(this.formLabelAlign))
      for (const key in obj) {
        this.input.map((res, index) => {
          if (res.enName == key) {
            if (Array.isArray(res.options)) {
              res.options.map(r => {
                if (obj[key] == r.value) {
                  obj[key] = r.label
                }
              })
            }
          }
        })
      }
      // window.localStorage.setItem("setform",JSON.stringify(this.formLabelAlign));//存储
      return obj
    }
  },
  watch: {
    'is_warranty_query': {
      handler(val) {
        this.warranty_query = val
      }, deep: true, immediate: true
    }
  },
  created() {
    // console.log()
    // this.getcate()
    // if(localStorage.getItem("setform")){
    //   let lastname = JSON.parse(localStorage.getItem("setform"));//读取
    //   this.formLabelAlign = lastname
    // }
    console.log(this.tableLabel)
    console.log(this.tableData)
  },
  props: {
    editshow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    attributeform: {
      type: Object,
      default: () => {
        return {}
      }
    },
    id: {
      type: String,
      default: () => {
        return ''
      }
    },
    input: {
      type: Array,
      default: () => {
        return []
      }
    },
    formLabelAlign: {
      type: Object,
      default: () => {
        return {}
      }
    },
    jiqidata: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    // 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod2({ row, _rowIndex, column, visibleData }) {
      const fields = ['title']
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
    // 是否查询状态改变
    warrantychange(e) {
      user_warranty_query({ user_id: this.user_id, is_warranty_query: e }).then(res => {
        this.$message({ type: 'success', message: e == 1 ? '查询已开启' : '查询已关闭' })
        this.$store.dispatch('user/getInfo')
      })
    },
    getcate() {
      cate_brand_list_all().then(res => {
        this.cate_options = res.datas
      })
      res_advanced_search().then(e => {
        this.op_user_id_options = e.datas['op_user_id']
        this.quote_user_options = e.datas['quote_user_id']
        this.customer_options = e.datas['supplier_info']
        this.grade_options = e.datas['grade_list']
        this.network_options = e.datas['network']
      })
    },
    editinfo() {
      const attribute = {}
      this.tableData.map(e => {
        const t = {}
        t[e.attr_id] = e.value
        Object.assign(attribute, t)
      })
      save_xy_attribute({ id: this.attributeform.id, attribute: attribute }).then(res => {
        if (res.errcode == 0) {
          this.$parent.determine(this.attributeform)
          this.handleClose()
        }
      })
    },
    change(val, name) {
      if (name == 'cate_id') {
        this.form.brand_id = null
        this.form.model_id = null
        this.form.rom_id = null
        this.form.color_id = null
        if (val) {
          cate_brand_list_all({ cate_id: val }).then(res => {
            this.brand_options = res.datas
          })
        } else {
          this.brand_options = []
          this.rom_options = []
          this.color_options = []
        }
      } else if (name == 'brand_id') {
        this.form.model_id = null
        this.form.rom_id = null
        this.form.color_id = null
        if (val) {
          cate_brand_list_all({ cate_id: this.form.cate_id, brand_id: val }).then(res => {
            this.model_options = res.datas
          })
        } else {
          this.model_options = []
          this.rom_options = []
          this.color_options = []
        }
      } else {
        this.form.rom_id = null
        this.form.color_id = null
        if (val) {
          cate_brand_list_all({ cate_id: this.form.cate_id, brand_id: this.form.brand_id, model_id: val }).then(res => {
            this.rom_options = res.datas['rom_list']
            this.color_options = res.datas['color_list']
          })
        } else {
          this.rom_options = []
          this.color_options = []
        }
      }
    },
    romclick(e, v) {
      let target = e.target
      if (target.nodeName === 'SPAN') {
        target = e.target.parentNode
      }
      target.blur()
      this.form.rom_id = v.value
    },
    colorclick(e, v) {
      let target = e.target
      if (target.nodeName === 'SPAN') {
        target = e.target.parentNode
      }
      target.blur()
      this.form.color_id = v.value
    },
    toImg() { // 转图片打印
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      html2canvas(this.$refs.printTest, {
        backgroundColor: false,
        useCORS: true,
        allowTaint: true
      }).then((canvas) => {
        const url = canvas.toDataURL()
        this.img = url
        printJS({
          printable: url,
          type: 'image',
          documentTitle: '打印'
        })
      //  console.log(url)
      })
    },
    brandclick(e, v, name, r) {
      console.log(this.tableLabel)
      console.log(this.tableData)
      console.log(e, v, name, r)
      console.log(r['value'].includes(e.attr_name))
      if (name.indexOf('多选') != -1) {
        if (v.attr_name == '正常' || v.attr_name == '无') {
          r.value = [v.attr_name]
        } else {
          if (r.value.includes('无') || r.value.includes('正常')) {
            r.value = []
            r.value.push(v.attr_name)
          } else {
            if (r.value.includes(v.attr_name)) {
              r.value.splice(r.value.indexOf(r.value.includes(v.attr_name), 1))
            } else {
              r.value.push(v.attr_name)
            }
          }
        }
      } else {
        r.value = v.attr_name
      }
      let target = e.target
      if (target.nodeName === 'SPAN') {
        target = e.target.parentNode
      }
      target.blur()
    },
    handleClose() {
      this.$emit('update:editshow', false)
    },
    share() { // 转发
      op_order_details_code({ order_op_id: this.id }).then((res) => {
        this.$delete(this.formLabelAlign, 'phone_list')
        var list = JSON.stringify(this.formLabelAlign)
        var host = window.location.host
        var http = window.location.protocol
        // console.log(`${http}`+'//'+`${host}/#/share2?uuid=`+res.datas.uuid+'&formLabelAlign='+list)
        new QRCode(this.$refs.qrCodeUrl, {
          // text:'https://erpv2.aiguovip.com/#/share/share?uuid='+res.datas.uuid,
          text: `${http}` + '//' + `${host}/#/share2?uuid=` + this.id + '&formLabelAlign=' + list,
          width: 120,
          height: 110,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
        })
      })
    },
    // 隐藏二维码
    hide() {
      this.$nextTick(function() {
        this.$refs.qrCodeUrl.innerHTML = ''
      })
    }
  }
}
</script>

<style lang="less" scoped>
// .btnclass ::v-deep .el-button--primary:focus{
//     margin-right: 12px;
//     border-radius: 2px;
//     box-shadow: 0 2px 4px 0 #f4f4f4;
//     color: #2794f8;
//     background: white;
// }
.btnclass ::v-deep .el-button--primary:hover{
    border-radius:20px;
    color: #2794f8;
    background: #d2e6fc;
    border-color:#b3d8ff ;
}
.btnclass ::v-deep .el-button{
    font-size: 2px;
    padding: 5px;
    min-width: 78px;
}
.main ::v-deep .vxe-body--column{
    padding: 5px 0 !important;
}
.body {
  display: flex;
  flex-direction: column;
}
.body-text {
  // display: flex;
  // flex-direction: column;
  margin-bottom: 15px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}
.text {
  font-size: 20px;
  font-weight: bold;
}
.text1 {
  font-size: 18px;
  // height: 20px;
}
.calculation {
  border: 1px solid #ebeef5;
  padding: 10px;
  font-size: 14px;
  span {
    padding: 0 10px;
    display: inline-block;
  }
}
table,td,th {
  border: 1px solid #d4d4d4;
}

table {
  border-collapse: collapse;
  height: 100px;
  width: 100%;
}

th {
  height: 65px;
}
.top{
    display: flex;
    background-color:#4ca48c;
    height:60px
}
.top-text{
    font-family: STHeiti;
    color: #fff;
    font-size: 26px;
    text-align: center;
}
.top-text1{
    font-family: STHeiti;
    color: #fff;
    font-size: 12px;
}
.fotter-top{
    display: flex;
    background-color:#4ca48c;
    height:60px;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}
.footer-Toptext{
    font-family: STHeiti;
    color: #fff;
    font-size: 24px;
}
.fotter-main{
    display: flex;
    // background-color:#fff;
    height:30px;
    justify-content: center;
}
.footer-maintext{
    font-family: STHeiti;
    color:#FFFFFF;
    font-size: 20px;
}
.el-col-6{
  width: 20%!important;
}
.branchWrap {
  margin: 0 -10px;
  height: 140px;
}
.branchWrap div {
  padding: 10px 10px;
  border-bottom: 1px solid #dfe6ec;
  height: 70px;
  line-height: 200%;
}
.branchWrap div:last-child {
  border: none;
}
.lineHeight28 {
  line-height: 30px;
}
.tip {
  margin-top:10px;
  width: 100%;
  max-height: 100px;
  overflow-y: scroll;
  border: 1px solid #ff633c;
  position: relative;
  background-color: #ff633c;
  color: #fff;
  border-radius: 4px;
  font-size: 16px ;
  padding: 0 10px;
}
</style>
