<!-- 价格调整单 -->
<template>
  <Modal v-model="modal" width="800px">
    <div class="title" slot="header">
      价格调整单
    </div>
    <div slot="footer" class="footer">
      <Button @click="cfm" class="btn" type="primary">提交</Button>
      <Button @click="cancel" class="btn">取消</Button>
    </div>
    <!--  表单主要内容  -->
    <div class="content" ref="print">
      <div class="sub-title border">
        <span>基本信息</span>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">申请人：</div>
          <div class="value">
            {{ $store.state.user.name }}
          </div>
        </div>
        <div class="col">
          <div class="label">申请部门：</div>
          <div class="value">
            {{ $store.state.user.dept }}
          </div>
        </div>
        <div class="col">
          <div class="label">申请时间：</div>
          <div class="value">
            {{ $dayjs().format('YYYY-MM-DD') }}
          </div>
        </div>
      </div>
      <div class="sub-title border">
        <span>变更信息</span>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">供应商：</div>
          <div class="value">
            {{ data.facName }}
<!--            <Select filterable :transfer="true" v-model="supplierId" style="max-width: 400px;">-->
<!--              <Option v-for="option in facSelectList" :value="option.value" :key="option.value">{{ option.text || '未知' }}</Option>-->
<!--            </Select>-->
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">物料编码：</div>
          <div class="value">
            {{ data.materialCode }}
          </div>
        </div>
        <div class="col">
          <div class="label">物料名称：</div>
          <div class="value">
            {{ data.materialName }}
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">原价格：</div>
          <div class="value">
            {{ data.price }}
          </div>
        </div>
        <div class="col">
          <div class="label">新价格：</div>
          <div class="value">
            <Input v-model="price" type="number"/>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col" style="align-items: flex-start">
          <div class="label">调整原因：</div>
          <div class="value">
            <Input v-model="remark" type="textarea"/>
          </div>
        </div>
      </div>
      <div class="sub-title border">
        <span>变更合同</span>
      </div>
      <div style="width: 100%;">
        <my-table :data="tableData" :columns="columns" :table-page="params" :isShowFilter="false" @on-change="change" @on-select="tableSelect"></my-table>
      </div>
    </div>
  </Modal>
</template>

<script>
import { GetChangePriceContractList, FacPriceChange } from '@/api/baseData'
import MyTable from '_c/my-table/my-table'
export default {
  name: 'quality-form',
  data () {
    return {
      purchaseBillNoList: [],
      supplierId: '',
      facSelectList: [],
      price: '',
      remark: '',
      modal: false,
      tableData: [],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      columns: [
        {
          type: 'selection'
        },
        {
          title: '合同编码',
          key: 'purchaseBillNo',
          minWidth: 200
        },
        {
          title: '交货日期',
          key: 'deliverTime',
          minWidth: 200
        },
        {
          title: '物料编码',
          key: 'materialCode',
          minWidth: 200
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 200
        },
        {
          title: '采购数量',
          key: 'purchaseQty',
          minWidth: 100
        },
        {
          title: '单价',
          key: 'price',
          minWidth: 100
        },
        {
          title: '全额',
          key: 'totalAmount',
          minWidth: 100
        }
      ]
    }
  },
  components: {
    MyTable
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      require: true
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
      if (n) {
        this.getChangePriceContractList()
        // // 供应商
        // GetFactorySelectItem().then(res => {
        //   if (res.code === 0) {
        //     this.facSelectList = res.result
        //   }
        // })
      }
    }
  },
  methods: {
    change (index) {
      this.params.pageIndex = index
      this.getChangePriceContractList()
    },
    getChangePriceContractList () {
      // 获取合同列表
      GetChangePriceContractList({
        ...this.params,
        supplierId: this.data.factoryId,
        materialCode: this.data.materialCode
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.result.list
          this.params.total = res.result.totalCount
        }
      })
    },
    tableSelect (section, row) {
      this.purchaseBillNoList = []
      for (const key in section) {
        this.purchaseBillNoList.push(section[key].purchaseBillNo)
      }
    },
    cfm () {
      FacPriceChange({
        applyUser: this.$store.state.user.name,
        applyDepartment: this.$store.state.user.dept,
        applyDateTime: this.$dayjs().format('YYYY-MM-DD'),
        factoryPriceId: this.data.id,
        materialCode: this.data.materialCode,
        newPrice: this.price,
        remark: this.remark,
        purchaseBillNoList: this.purchaseBillNoList
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '修改成功')
          this.cancel()
        }
      })
    },
    cancel () {
      this.tableData = []
      this.price = ''
      this.remark = ''
      this.modal = false
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  .sub-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    font-size: 14px;
    font-weight: bold;
    &.border {
      border-bottom: 1px solid #000000;
    }
    .go {
      font-size: 10px;
      font-weight: normal;
      color: #0000ff;
    }
  }
  .row {
    padding: 0 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .col {
      flex: 1;
      display: flex;
      align-items: center;
      .label {
        width: 60px;
      }
      .value {
        width: ~"calc(100% - 100px)";
      }
    }
  }

}
</style>
