<template>
  <el-dialog
    title="编辑属性"
    :visible.sync="editshow"
    width="1000px"
    top="5vh"
    append-to-body
    :close-on-click-modal = "false"
    :before-close="handleClose"
  >
    <div class="main" >
        <!-- 基础信息 -->
        <div>
            <h3 style="font-weight: bold;">基础信息</h3>
            <el-form ref="form" :model="attributeform" :inline="true" label-width="80px">
                    <el-form-item label="客户" required>
                        <el-select v-model="attributeform.customer_id" :disabled="!!attributeform.res_id"  size="small" placeholder="请选择客户" filterable clearable>
                            <el-option v-for="(e,i) in customer_options" :key="i" :label="e.label" :value="e.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="价格" required>
                        <el-input v-model="attributeform.pay_amount" :disabled="!!attributeform.res_id && ($route.name!='Purchase_order_Details'|| attributeform.pay_id>0 )" @input="attributeform['pay_amount'] = AmountInput(attributeform['pay_amount'],2,'exceed')" size="small" placeholder="请输入价格"  clearable></el-input>
                    </el-form-item>
                    <el-form-item label="零售价">
                        <el-input v-model="attributeform.retail_price" size="small" placeholder="请输入零售价"  clearable></el-input>
                    </el-form-item>
                    <el-form-item label="参考价" v-if="formLabelAlign && formLabelAlign['warehousing_type'] == 2">
                        <el-input v-model="attributeform.reference_price" size="small" placeholder="请输入参考价"  clearable></el-input>
                    </el-form-item>
            </el-form> 
        </div>
        <!-- 属性 -->
        <div>
            <h3 style="font-weight: bold;">属性</h3>
            <el-form ref="form" :model="attributeform" :inline="true" label-width="95px">
                    <el-form-item label="质检员" prop="op_user_id">
                        <el-select v-model="attributeform.op_user_id"  size="small" placeholder="请选择质检员" filterable clearable>
                            <el-option v-for="(e,i) in op_user_id_options" :key="i" :label="e.label" :value="e.value"></el-option>
                        </el-select>
                    </el-form-item>              
                    <el-form-item label="报价师" >
                        <el-select v-model="attributeform.quote_user_id"  size="small" placeholder="请选择报价师" filterable clearable>
                            <el-option v-for="(e,i) in quote_user_options" :key="i" :label="e.label" :value="e.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="ID锁" >
                        <el-select v-model="attributeform.fmi_lock"  size="small" placeholder="请选择ID锁" filterable clearable>
                            <el-option v-for="(e,i) in id_options" :key="i" :label="e.label" :value="e.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="国别" >
                        <el-select v-model="attributeform.countries"  size="small" placeholder="请选择国别" filterable clearable>
                            <el-option v-for="(e,i) in countries_options" :key="i" :label="e.label" :value="e.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机器等级(成色)" >
                        <el-select v-model="attributeform.grade"  size="small" placeholder="请选择机器等级(成色)" filterable clearable>
                            <el-option v-for="(e,i) in grade_options" :key="i" :label="e.label" :value="e.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="系统版本">
                        <el-input v-model="attributeform.sys_net_no" size="small" placeholder="请输入系统版本"  clearable></el-input>
                    </el-form-item>
                    <el-form-item label="电池健康">
                        <el-input v-model="attributeform.battery_health"  oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" size="small" placeholder="请输入电池健康"  clearable>
                            <span slot="suffix">%</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="充电次数">
                        <el-input v-model="attributeform.recharge_num" size="small" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" placeholder="请输入充电次数"  clearable></el-input>
                    </el-form-item>
                    <el-form-item label="网络制式" >
                        <el-select v-model="attributeform.network"  size="small" placeholder="请选择网络制式" filterable clearable>
                            <el-option v-for="(e,i) in network_options" :key="i" :label="e.label" :value="e.value"></el-option>
                        </el-select>
                    </el-form-item>                    
            </el-form> 
        </div>
        <!-- 备注 -->
        <div>
            <h3 style="font-weight: bold;">备注</h3>
            <div class="flex-b">
              <div>
                <el-input type="textarea" :rows="3"  resize="none" placeholder="请输入备注" v-model="attributeform.remark"></el-input>
              </div>
            </div>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button 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 {ai_model_update_v2,cate_brand_list_all,user_warranty_query,purchase_order_edit_phone,edit_drafts_box} from "@/api/Warehousing"; //获取客户信息接口
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 {
        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();
    },
    sumprice() {
      var price = 0;
      this.tableData.map((res) => {
        price += Number(res.price);
      });
      return price;
    },
    aaa(){
      let obj = JSON.parse(JSON.stringify(this.formLabelAlign))
          for(let 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(){
    this.getcate()
    // if(localStorage.getItem("setform")){
    //   let lastname = JSON.parse(localStorage.getItem("setform"));//读取
    //   this.formLabelAlign = lastname
    // }
    // console.log(this.formLabelAlign,'thisformLabelAlign')
  },
  props: {
    editshow: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    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: {
    //是否查询状态改变
    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({p_user_id:this.attributeform.company_user_id}).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(){
      if (!!this.attributeform.res_id) {//采购单
        purchase_order_edit_phone(this.attributeform).then(res=>{
          this.$parent.getlist()
          this.handleClose()
        })
      }else{
        edit_drafts_box({...this.attributeform,client_type:2}).then(res=>{
          this.$parent.getlist()
          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)
     })
   },
    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: 2px;
    color: #2794f8;
    background: #d2e6fc;
    border-color:#b3d8ff ;
}
.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;
}
</style>
