<template>
  <div class="content">
    <el-dialog
      :title="Obj.DialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="close"
      :close-on-click-modal="closeclickmodal"
      class="abow_dialog"
    >
      <span v-if="Obj.DialogTitle == '添加销售'" style="display:flex">
        <el-radio-group v-model="ruleForm.is_sales_accessories" @change="radio_change">
          <el-radio-button :label="0">手机销售</el-radio-button>
          <el-radio-button :label="1">配件销售</el-radio-button>
        </el-radio-group>
      </span>
      <span v-if="Obj.DialogTitle == '品牌转移'" style="display:flex">
        原品牌信息:品牌:{{ original.brand }} 型号:{{ original.model_set }} 容量:{{ original.ram }} 颜色:{{ original.color }}
      </span>
      <el-form
        ref="ruleForm"
        label-position="top"
        :model="ruleForm"
        label-width="100px"
        size="mini"
      >
        <el-row>
          <el-col v-for="(item, index) in Input" :key="index" :span="item.span">
            <el-form-item
              v-if="item.Typeshow"
              :prop="item.prop"
              :rules="{
                required: item.required,
                message: item.placeholder,
                trigger: ['blur', 'change'],
              }"
              :label="item.label"
            >
              <template slot="label">
                <div v-if="Obj.DialogTitle == '添加销售'&&item.label=='条形码'" style="display:flex;align-items: center;justify-content: space-between;">
                  <div>条形码</div>
                  <div v-if="imei.zljshow" style="margin-left:20px">
                    <div v-if="loadinglist.codeloading==1" style="display:flex;align-items: center;color:#9AAFC0">
                      <i class="el-icon-loading" style="color:orange;font-size:20px" />
                      <span>自动查询中</span>
                    </div>
                    <div v-else-if="loadinglist.codeloading==3" style="display:flex;align-items: center;">
                      <!-- <i class="el-icon-error" style="color:#F56C6C;font-size:20px"></i>
                      <span style="color:#F56C6C">查询失败</span> -->
                      <a style="display:flex;align-items: center;" @click="getcode()">
                        <i class="el-icon-refresh-right" style="color:#9AAFC0;margin-left:15px;font-size:20px" />
                        <span style="color:#9AAFC0">重新获取</span>
                      </a>
                    </div>
                    <div v-else-if="loadinglist.codeloading==2" style="display:flex;align-items: center;color:#9AAFC0">
                      <!-- <i class="el-icon-success" style="color:#67C23A;font-size:20px"></i>
                      <span style="color:#67C23A">查询成功</span> -->
                      <span style="margin-left:15px">状态:</span>
                      <span :style="loadinglist.state_name=='上架中'?'color:green':'color:red'">{{ loadinglist.state_name }}</span>
                      <el-popover placement="bottom" trigger="click">
                        <el-table :data="[loadinglist.gridData]">
                          <el-table-column type="index" width="50" label="编号" align="center" />
                          <el-table-column width="150" property="imei" label="IMEI" align="center" />
                          <el-table-column width="150" property="qc_code" label="质检码/商品Id" align="center" />
                          <el-table-column width="150" property="order_time" label="供货时间" align="center">
                            <template slot-scope="scope">
                              {{ scope.row['order_time'] | dateformat("YYYY-MM-DD HH:mm:ss") }}
                            </template>
                          </el-table-column>
                          <el-table-column width="150" property="sold_time" label="售出时间" align="center">
                            <template slot-scope="scope">
                              <span v-if="!!scope.row['sold_time']">{{ scope.row['sold_time'] | dateformat("YYYY-MM-DD HH:mm:ss") }}</span>
                              <span v-else>-</span>
                            </template>
                          </el-table-column>
                        </el-table>
                        <i slot="reference" class="el-icon-info" style="font-size:20px" />
                      </el-popover>
                    </div>
                  </div>
                </div>
                <div v-if="Obj.DialogTitle == '添加销售'&&item.label=='快递单号'" style="display:flex;align-items: center;justify-content: space-between;">
                  <div>快递单号</div>
                  <div v-if="imei.zljshow" style="margin-left:20px">
                    <div v-if="loadinglist.codeloading==1" style="display:flex;align-items: center;color:#9AAFC0">
                      <i class="el-icon-loading" style="color:orange;font-size:20px" />
                      <span>自动查询中</span>
                    </div>
                    <div v-else-if="loadinglist.codeloading==3" style="display:flex;align-items: center;">
                      <!-- <i class="el-icon-error" style="color:#F56C6C;font-size:20px"></i>
                      <span style="color:#F56C6C">查询失败</span> -->
                      <a style="display:flex;align-items: center;" @click="getcode()">
                        <i class="el-icon-refresh-right" style="color:#9AAFC0;margin-left:15px;font-size:20px" />
                        <span style="color:#9AAFC0">重新获取</span>
                      </a>
                    </div>
                    <div v-else-if="loadinglist.codeloading==2" style="display:flex;align-items: center;color:#9AAFC0">
                      <!-- <i class="el-icon-success" style="color:#67C23A;font-size:20px"></i>
                      <span style="color:#67C23A">查询成功</span> -->
                      <span style="margin-left:15px">状态:</span>
                      <span :style="loadinglist.state_name=='上架中'?'color:green':'color:red'">{{ loadinglist.state_name }}</span>
                      <el-popover placement="bottom" trigger="click">
                        <el-table :data="[loadinglist.gridData]">
                          <el-table-column type="index" width="50" label="编号" align="center" />
                          <el-table-column width="150" property="imei" label="IMEI" align="center" />
                          <el-table-column width="150" property="qc_code" label="质检码/商品Id" align="center" />
                          <el-table-column width="150" property="order_time" label="供货时间" align="center">
                            <template slot-scope="scope">
                              {{ scope.row['order_time'] | dateformat("YYYY-MM-DD HH:mm:ss") }}
                            </template>
                          </el-table-column>
                          <el-table-column width="150" property="sold_time" label="售出时间" align="center">
                            <template slot-scope="scope">
                              <span v-if="!!scope.row['sold_time']">{{ scope.row['sold_time'] | dateformat("YYYY-MM-DD HH:mm:ss") }}</span>
                              <span v-else>-</span>
                            </template>
                          </el-table-column>
                        </el-table>
                        <i slot="reference" class="el-icon-info" style="font-size:20px" />
                      </el-popover>
                    </div>
                  </div>
                </div>
              </template>

              <div style="display:flex;">
                <el-input
                  v-if="item.label =='销售价格'|| item.label =='采购价格' || item.label =='支付金额' ||item.label =='销售总价格' "
                  v-model="ruleForm[item.enName]"
                  :style="item.width"
                  :clearable="true"
                  :props="item.props"
                  :placeholder="item.placeholder"
                  :value="item.value"
                  @input="ruleForm[item.enName] = AmountInput(ruleForm[item.enName],2,'exceed')"
                />
                <div
                  :is="item.type"
                  v-else
                  v-model="ruleForm[item.enName]"
                  :placeholder="item.placeholder"
                  :value="item.value"
                  :style="item.width"
                  :format="item.format"
                  :type="item.TimeType"
                  :value-format="item.valueformat"
                  :clearable="true"
                  :filterable="item.filterable"
                  :disabled="item.disabled"
                  :allow-create="item.allowcreate"
                  :picker-options="item.pickerOptions"
                  :default-first-option="item.defaultfirstoption"
                  :multiple="item.multiple"
                  :props="item.props"
                  :name="item.name"
                  @change="change(item.enName,ruleForm[item.enName],Obj.DialogTitle,item.label,item.options,item)"
                  @remove-tag="removetag"
                >
                  {{ item.name == 'is_accessories'? '' : item.name }}
                  <el-option
                    v-for="items in item.options"
                    :key="items.value"
                    :label="items.label"
                    :value="items.value"
                  >
                    <span v-if="item.label == '颜色'">
                      <span style="float: left">{{ items.label }}</span>
                      <el-popover
                        placement="right"
                        width="200"
                        trigger="hover"
                      >
                        <img
                          v-if="items.img"
                          style="height: 200px"
                          :src="items.img"
                        >
                        <img
                          v-if="items.img"
                          slot="reference"
                          style="float: right;height: 34px"
                          :src="items.img"
                        >
                      </el-popover>
                    </span>
                  </el-option>
                </div>
              </div>
            </el-form-item>
            <el-col
              v-for="(r, i) in item.repair_customer"
              :key="i"
              :span="r.span"
            >
              <el-col v-for="(value, key, index) in r" :key="index" :span="value.span" :class="value.class">
                <el-form-item
                  :label="value.label"
                  :prop="value.prop"
                  :rules="{
                    required: value.required,
                    message: value.placeholder,
                    trigger: ['blur', 'change'],
                  }"
                >
                  <div style="display:flex">
                    <div
                      :is="value.type"
                      v-model="ruleForm.accessories[i][value.enName]"
                      :style="value.width"
                      :filterable="value.filterable"
                      clearable
                      :placeholder="value.placeholder"
                      onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                    >
                      <el-option
                        v-for="items in value.options"
                        :key="items.value"
                        :label="items.label"
                        :value="items.value"
                        :res_id="items.value"
                      >
                        <span v-if="value.label == '配件'" style="float: left">{{ items.label }}</span>
                        <span v-if="value.label == '配件'" style="float: right; color: #8492a6; font-size: 13px">{{ items.number ? `(${items.number})个` : '' }}</span>
                      </el-option>
                    </div>
                  </div>
                  <i class="Font" :class="value.Icon" @click="operation(r,i,value.name)" />
                </el-form-item>
              </el-col>
            </el-col>
            <el-col
              v-for="(items, i) in item.alipay"
              :key="i"
              :span="items.span"
            >
              <el-form-item>
                <div
                  :is="items.type"
                  v-model="ruleForm.pay_info.alipay[items.enName]"
                  :action="items.action"
                  :placeholder="items.placeholder"
                  type="alipay"
                />
                <!--图片上传组件-->
                <uploadImg
                  v-if="items.type == 'el-upload'"
                  :action-url="items.action"
                  :image-url="ruleForm.pay_info.alipay[items.enName]"
                  type="alipay"
                  @UrlImg="UrlImg"
                />
              </el-form-item>
            </el-col>
            <el-col
              v-for="(items, i) in item.wechat"
              :key="i"
              :span="items.span"
            >
              <el-form-item>
                <div
                  :is="items.type"
                  v-model="ruleForm.pay_info.wechat[items.enName]"
                  :action="items.action"
                  :placeholder="items.placeholder"
                  type="wechat"
                />
                <!--图片上传组件-->
                <uploadImg
                  v-if="items.type == 'el-upload'"
                  :action-url="items.action"
                  :image-url="ruleForm.pay_info.wechat[items.enName]"
                  type="wechat"
                  @UrlImg="UrlImg"
                />
              </el-form-item>
            </el-col>
            <el-col v-for="(items, i) in item.bank" :key="i" :span="items.span">
              <el-form-item>
                <div
                  :is="items.type"
                  v-model="ruleForm.pay_info.bank[items.enName]"
                  :placeholder="items.placeholder"
                />
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
          <el-button v-if="Obj.DialogTitle == '选择属性'" type="success" @click="Reexamination()">重查保修</el-button>
          <el-button type="primary" @click="submitForm('ruleForm', Obj.Button, Obj.DialogTitle)">{{ Obj.Button }}</el-button>
        </el-form-item>
      </el-form>
      <!--客户-->
      <innerDIalog :inner-visible.sync="innerVisible" append-to-body :input="InputArr" :rule-form="rule" :obj="DiaButton" @save="addsave" @ImgSrc="ImgSrc" />
      <Dialog :outer-visible.sync="outerVisible" :options="options" :statusoptions="statusoptions" :rule-form="Sales" :obj="DiaButton" @addplus="addplus" @del="del" @save="addsave" />
    </el-dialog>
  </div>
</template>

<script>
import { save_User } from '@/api/Suppliermanagement'
import { save } from '@/api/salesman'
import uploadImg from '@/components/Upload'
import innerDIalog from '@/components/Dialog/InnerDialog' // 添加客户
import Dialog from '../../views/settings/dialog' // 营业员
import { zz_new_status } from '@/api/machineList' // 获取列表信息接口
import { cate_brand_list_in_stock } from '@/api/Jiqidetails' // 获取列表信息接口

export default {
  components: {
    uploadImg,
    innerDIalog,
    Dialog
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    closeclickmodal: {
      type: Boolean,
      default: true
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    original: {
      type: Object,
      default: () => {
        return {}
      }
    },
    Obj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    Obj_money: {
      type: Object,
      default: () => {
        return {}
      }
    },
    Input: {
      type: Array,
      default: () => {
        return []
      }
    },
    imei: {
      type: Object,
      default: () => {
        return {}
      }
    },
    ruleForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    amount_money: {
      type: [Number, String],
      default: () => {
        return 0
      }
    },
    Settlement_amount: {
      type: [Number, String],
      default: () => {
        return 0
      }
    },
    pay_customer: {
      type: [Number, String],
      default: () => {
        return 0
      }
    },
    /* 用户信息 二维码 银行卡*/
    user_info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      checked: false,
      tabPosition: '不使用预付款',
      radio1: '手机销售',
      outerVisible: false,
      innerVisible: false,
      actionUrl: 'https://aiguovip2020.oss-cn-shenzhen.aliyuncs.com',
      Sales: {}, // 营业员对象
      DiaButton: { DialogTitle: '', Button: '' },
      rule: {},
      enName: '',
      // 模态框输入框
      InputArr: [],
      options: [{ label: '固定值', value: 1 }, { label: '百分比', value: 2 }],
      statusoptions: [{ label: '正常', status: 0 }, { label: '非正常', status: 1 }],
      type: '',
      loadinglist: []
    }
  },
  computed: {
    // 把对象序列化
    pay_info() {
      return this.bank_info.pay_info ? JSON.parse(this.bank_info.pay_info) : { alipay: { qr_code: '', name: '' }, wechat: { qr_code: '', name: '' }, bank: { bank_no: '', name: '', kaihuhang: '' }}
    }
  },
  watch: {
    list: {
      handler(newVal, value) {
        if (newVal) {
          // this.$set(this.loadinglist,'',newVal)
          this.loadinglist = newVal
          if (newVal.customer_barcode) {
            // this.$set(this.ruleForm,'barcode',newVal.customer_barcode)
          }
        }
      },
      deep: true,
      immediate: true
    },
    imei: {
      handler(newVal, value) {
        if (newVal) {
          if (newVal.zljshow) {
            this.$set(this.ruleForm, 'barcode', this.loadinglist.customer_barcode)
          } else {
            this.$set(this.ruleForm, 'barcode', '')
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  methods: {
    getcode() {
      const e = this.imei
      if (e.account && e.account.length != 0) {
        const Obj = { imei: e.imei1, imei2: e.imei2, account: e.account }
        this.$set(this.loadinglist, 'codeloading', 1)
        zz_new_status(Obj).then((res) => {
          if (res.errcode == 0 && res.datas.length != 0) {
            this.$set(this.loadinglist, 'gridData', res.datas)
            this.$set(this.loadinglist, 'customer_barcode', res.datas[0].qc_code)
            this.$set(this.loadinglist, 'codeloading', 2)
            this.$set(this.loadinglist, 'state_name', res.datas[0].state_name)
            this.$set(this.loadinglist, 'order_time', res.datas[0].order_time)
            this.$set(this.loadinglist, 'sold_time', res.datas[0].sold_time)
          } else {
            this.$set(this.loadinglist, 'codeloading', 3)
          }
        })
      }
    },
    // 在对话框打开时候使用resetFields方法移除表单的校验
    clearcheck() {
      if (this.$refs['ruleForm']) {
        this.$refs['ruleForm'].clearValidate()
      }
    },
    Reexamination() {
      this.$emit('Reexamination')
    },
    // 销售信息单选框
    radio_change(val) {
      this.$emit('radio_change', val)
    },
    input(e) {
      this.$forceUpdate()
    },
    change(enName, e, DialogTitle, label, options) {
      if (DialogTitle == '选择属性') {
        for (const key in this.ruleForm) {
          if (key == enName) {
            var str = enName.substring(0, enName.length - 2) // 去掉enName最后两个字符 例如:brand_id 变为brand_
            str = str + 'name' // 拼接上name 例如brand_ 变为 band_name 就是该value值的label属性
            options.map((item) => {
              if (item.value === e) {
                this.ruleForm[str] = item.label // 如果value等于选中的value值 那么取到他的label 赋值给ruleForm
              }
            })
          }
        }
        this.$emit('hide', { enName: enName, e: e, DialogTitle: DialogTitle, row: this.ruleForm, label: label })
      }
      if (enName == 'new_other') {
        this.$emit('change_new_other', e)
      } else if (DialogTitle == '添加销售') {
        let account_class_code = '' // 客户类别
        if (Array.isArray(options)) {
          options.map(r => {
            if (e == r.value) {
              account_class_code = r.account_class_code
            }
          })
        }
        this.$emit('hide', { enName: enName, e: e, DialogTitle: DialogTitle, row: this.ruleForm, label: label, account_class_code: account_class_code })
      } else {
        this.$emit('hide', { enName: enName, e: e, DialogTitle: DialogTitle, row: this.ruleForm, label: label })
      }
    },
    focus(row, item) {
      this.$emit('Selectfocus', { row: row, item: item })
    },
    tabclick(value) {
      this.$emit('surplus_money', { tabPosition: this.tabPosition, actual_Settlement_amount: this.actual_Settlement_amount })
    },
    submitForm(formName, name, DialogTitle) {
      this.$refs[formName].validate((valid, obj) => {
        if (valid) {
          if (this.ruleForm.price && this.ruleForm.textarea_price) {
            this.$message({ type: 'warning', message: '填写一个即可,禁止填写两个' })
            return
          }
          if (this.ruleForm.remark && this.ruleForm.textarea_remark) {
            this.$message({ type: 'warning', message: '填写一个即可,禁止填写两个' })
            return
          }
          if (this.ruleForm.grade_list && this.ruleForm.textarea_grade_list) {
            this.$message({ type: 'warning', message: '填写一个即可,禁止填写两个' })
            return
          }
          this.$emit('save', {
            row: this.ruleForm,
            original: this.original,
            tabPosition: this.tabPosition,
            checked: this.checked,
            name: name,
            DialogTitle: DialogTitle
          })
          this.tabPosition = '不使用预付款'
          this.$emit('update:dialogVisible', false)
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.tabPosition = '不使用预付款'
      this.$emit('colse')
      this.$emit('update:dialogVisible', false)
    },
    close() {
      this.tabPosition = '不使用预付款'
      this.$emit('colse')
      this.$emit('update:dialogVisible', false)
    },
    // 子组件上传图片成功 返回地址
    UrlImg(data) {
      this.$emit('img', data)
    },
    addsave(data) {
      if (data.Sales == 'Sales') {
        save(data.row).then((res) => {
          this.$emit('update')
        })
      } else {
        save_User(data.row).then((res) => {})
      }
    },
    addplus() {
      this.Sales.brokerage.push({ 'range': [], 'type': '', 'value': '' })
    },
    del(data) {
      this.$delete(this.Sales.brokerage, data)
    },
    // 添加或删除
    operation(r, i, name) {
      this.$emit('operation', { row: r, index: i, name: name })
    },
    ImgSrc(data) {
      if (data.type == 'alipay') {
        this.rule.pay_info.alipay.qr_code = data.imageUrl
      } else {
        this.rule.pay_info.wechat.qr_code = data.imageUrl
      }
    },
    // 多选模式下移除Tag触发
    removetag(r) {
      this.$emit('removetag', r)
    }
  }
}
</script>

<style scoped lang="scss">

.fonticon{
  color: #fff;
  padding: 0px 15px;
  font-size: 24px;
  position: relative;
  top: 5px;
}
.fontcont{
  padding: 0px 15px;
  font-size: 24px;
}
.IconClass{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 40px;
}
.Font{
  font-size: 20px;
}
.content ::v-deep .el-form-item{
  margin-bottom:18px;
}
.pay_info{
  span{
    padding: 0 20px 0 0;
  }
}
.accessclass{
  width: 100%;
  border: 1px solid #EBEEF5;
  padding: 10px;
  font-size: 14px;
}
</style>
