import { required } from '@/components/template/rules_verify.js'
import { listPageV2 } from '@/api/auxiliaryFittings/supplier'
import { goodsPurchaseList, goodsPurchaseDetail } from '@/api/goodsPurchasedStored.js'
import ImageUpload from '@/components/file-upload'
export default {
  data() {
    return {
      gysList: [],
      cgrkOrder: []
    }
  },
  computed: {
    formItems() {
      return [
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: '',
            'label-width': '0px'
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <div>
                <el-descriptions
                  border
                  title=""
                  column={4}
                  colon={false}
                  labelStyle={{ width: '8%' }}
                  contentStyle={{ width: '17%' }}
                >
                  <el-descriptions-item label="单据状态">
                    {{ SAVE: '保存', WAIT: '待审核', OK: '通过', FAIL: '失败' }[this.formData.status] || ''}
                  </el-descriptions-item>
                  <el-descriptions-item label="单据编号">{this.formData.id || ''}</el-descriptions-item>
                  <el-descriptions-item label="所属商户" contentStyle={{ width: '42%' }}>
                    {JSON.parse(localStorage.getItem('greemall_user')).companyName}
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions
                  border
                  title=""
                  column={2}
                  colon={false}
                  labelStyle={{ width: '8%' }}
                  contentStyle={{ width: '42%' }}
                  style="margin-top:-1px"
                >
                  <el-descriptions-item label="供应商名称">
                    <div class="redbordererr">
                      <el-form-item label="" lebel-width="0px" prop={`venderId`} rules={required}>
                        <el-select
                          style="width:100%"
                          value={this.formData.venderId}
                          onInput={val => {
                            this.formData.venderId = val
                          }}
                          placeholder="请选择"
                          disabled={!!~['SAVE', 'WAIT', 'OK', 'FAIL'].indexOf(this.formData.status)}
                          onChange={val => {
                            if (val) {
                              this.formData['venderName'] = this.gysList.find(item => item.venderId == val).venderName
                              if (!!~['merchandisePurchaseReturn'].indexOf(this?.$route?.name)) {
                                this.cgrkOrder = []
                                this.formData.items = []
                                this.getCgrkOrder()
                              }
                            } else {
                              this.formData['venderName'] = ''
                              if (!!~['merchandisePurchaseReturn'].indexOf(this?.$route?.name)) {
                                this.cgrkOrder = []
                                this.formData.items = []
                                this.formData.goodsPurchaseId = ''
                              }
                            }
                          }}
                        >
                          {this.gysList.map(item => (
                            <el-option key={item.venderId} label={item.venderName} value={item.venderId}></el-option>
                          ))}
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-descriptions-item>
                  {!!~['merchandisePurchaseReturn'].indexOf(this?.$route?.name) ? (
                    <el-descriptions-item label="采购入库单">
                      <div class="redbordererr">
                        <el-form-item label="" lebel-width="0px" prop={`goodsPurchaseId`} rules={required}>
                          <el-select
                            style="width:100%"
                            value={this.formData.goodsPurchaseId}
                            onInput={val => {
                              this.formData.goodsPurchaseId = val
                            }}
                            placeholder="请选择"
                            disabled={!!~['SAVE', 'WAIT', 'OK', 'FAIL'].indexOf(this.formData.status)}
                            filterable={true}
                            clearable={true}
                            onChange={val => {
                              this.formData.items = []
                              if (val) {
                                goodsPurchaseDetail({ id: val }).then(res => {
                                  this.formData.items = res.data.items.map(item => ({
                                    brandId: item.brandId,
                                    brandName: item.brandName,
                                    mainId: item.mainId,
                                    mainName: item.mainName,
                                    smallId: item.smallId,
                                    smallName: item.smallName,
                                    goodsMaterialId: item.goodsMaterialId,
                                    goodsMaterialName: item.goodsMaterialName,
                                    specsName: item.specsName,
                                    unit: item.unit,
                                    insideQty: item.insideQty,
                                    outQty: item.outQty,
                                    partsQty: item.partsQty,
                                    qty: item.qty,
                                    price: item.price,
                                    amount: item.amount,
                                    stockQty: item.stockQty,
                                    retQty: '',
                                    retInsideQty: '',
                                    retOutQty: '',
                                    retPartsQty: '',
                                    insideCodeQty: '',
                                    outCodeQty: '',
                                    partsCodeQty: '',
                                    retAmount: '',
                                    details: {}
                                  }))
                                })
                              }
                            }}
                          >
                            {this.cgrkOrder.map(item => (
                              <el-option
                                key={item.id}
                                label={`${item.id} | 销售金额:${item.totalAmount || '-'} | 入库时间:${
                                  item.examineTime || '-'
                                }`}
                                value={item.id}
                              ></el-option>
                            ))}
                          </el-select>
                        </el-form-item>
                      </div>
                    </el-descriptions-item>
                  ) : (
                    <el-descriptions-item label=""></el-descriptions-item>
                  )}
                </el-descriptions>
                <el-descriptions
                  border
                  title=""
                  column={4}
                  colon={false}
                  labelStyle={{ width: '8%' }}
                  contentStyle={{ width: '17%' }}
                  style="margin-top:-1px"
                >
                  {!!~['merchandisePurchaseReturn'].indexOf(this?.$route?.name)
                    ? [
                        <el-descriptions-item label="退货数量">{this.formData.totalQty}</el-descriptions-item>,
                        <el-descriptions-item label="退款金额">{this.formData.totalAmount}</el-descriptions-item>,
                        <el-descriptions-item label=""></el-descriptions-item>,
                        <el-descriptions-item label=""></el-descriptions-item>
                      ]
                    : null}
                  <el-descriptions-item label="制单人">{this.formData.createBy}</el-descriptions-item>
                  <el-descriptions-item label="制单时间">{this.formData.createTime}</el-descriptions-item>
                  <el-descriptions-item label="审核人">{this.formData.examineBy}</el-descriptions-item>
                  <el-descriptions-item label="审核时间">{this.formData.examineTime}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions
                  border
                  title=""
                  column={4}
                  colon={false}
                  labelStyle={{ width: '8%' }}
                  contentStyle={{ width: '17%' }}
                  style="margin-top:-1px"
                >
                  <el-descriptions-item label="备注" contentStyle={{ width: '92%' }}>
                    <el-input
                      type="textarea"
                      placeholder="请输入内容"
                      value={this.formData.remark}
                      onInput={val => {
                        this.formData.remark = val
                      }}
                      maxlength="200"
                      show-word-limit
                      autosize={{ minRows: 2, maxRows: 4 }}
                      disabled={!!~['SAVE', 'WAIT', 'OK', 'FAIL'].indexOf(this.formData.status)}
                    ></el-input>
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions
                  border
                  title=""
                  column={4}
                  colon={false}
                  labelStyle={{ width: '8%' }}
                  contentStyle={{ width: '17%' }}
                  style="margin-top:-1px"
                >
                  <el-descriptions-item label="附件" contentStyle={{ width: '92%' }}>
                    <ImageUpload
                      fileList={this.formData.fileUrl}
                      uid="imgSrc666_materials_drawing_images"
                      limit={1}
                      isEdit={!~['SAVE', 'WAIT', 'OK', 'FAIL'].indexOf(this.formData.status)}
                      fileType={['image']}
                    />
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            )
          }
        }
      ]
    }
  },
  methods: {
    // 获取供应商列表
    getGysList() {
      listPageV2({
        pageNum: 1,
        pageSize: -1,
        params: [
          { param: 'a.status', compare: '=', value: 'ON' },
          { param: 'a.vender_type', compare: 'like', value: '商品' }
        ]
      }).then(res => {
        this.gysList = res.data.records
      })
    },
    getCgrkOrder() {
      if (this.formData.venderId) {
        goodsPurchaseList({
          pageNum: 1,
          pageSize: -1,
          params: [{ param: 'a.vender_id', compare: '=', value: this.formData.venderId }]
        }).then(res => {
          this.cgrkOrder = res.data.records
          console.log(res.data.records)
        })
      }
    }
  }
}