<template>
  <!-- 往来单位 人员配置 表单组件 -->
  <div>
    <!-- 表格 -->
    <TableModel
      :formLabel="formLabelAdd"
      :columnsList="columnsListAdd"
      ref="tableRef"
      style="display: flex; flex-direction: column"
      :show-btn-crews="false"
      :cascader-func="queryMeterByVal"
      :extra-table-prop="extraProp"
      @transIdList="getIdList"
    >
      <template slot="btn" slot-scope="{ queryParams }">
        <el-button type="primary" @click="save"
        >保存</el-button>
<!--        <el-button @click="handleExportData(queryParams, 'base/agreement/export', '物资清单')"
        >导出</el-button>-->
      </template>
      <template slot="handle" slot-scope="{ data }">
<!--        <el-button
          type="info"
          size="mini"
          v-if="data.level === '4'"
        >查看</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="handleEditData(data)"
        >编辑</el-button
        >-->
        <el-button
          type="danger"
          size="mini"
          @click="delMa(data)"
        >删除</el-button
        >
      </template>
      <template slot="typeId" slot-scope="{ data }">
        {{ data.typeName }}
      </template>
      <template slot="purchasePrice" slot-scope="{ data }">
        <el-input v-model="data.purchasePrice"></el-input>
      </template>
      <template slot="notaxPrice" slot-scope="{ data }">
        <el-input v-model="data.notaxPrice"></el-input>
      </template>
      <template slot="productDate" slot-scope="{ data }">
        <el-date-picker
          style="width: 100%"
          v-model="data.productDate"
          value-format="yyyy-MM-dd"
          type="date"
        />
      </template>
      <template slot="supplierId" slot-scope="{ data }">
        <el-select
          v-model="data.supplierId"
        >
          <el-option
            v-for="item in sendRange"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <template slot="taxRate" slot-scope="{ data }">
        <el-input-number
          style="width: 100%"
          controls-position="right"
          v-model="data.taxRate"
          :min="0"
        ></el-input-number>
      </template>
      <template slot="files" slot-scope="{ data }">
        <h5
          style="color: #02A7F0; cursor: pointer; font-weight: normal"
          @click="handleEditData(data)"
        >报告管理</h5>
      </template>
    </TableModel>

    <!-- 弹框 -->
  <DialogModel
    :dialogConfig="dialogConfig"
    @closeDialogOuter="closeDialogOuter"
  >
    <template slot="outerContent">
      <!-- 新增以及修改数据的表单组件 -->
      <FormArrival
        @closeDialog="closeDialog"
        :editParams="editParams"
      />
    </template>
  </DialogModel>

  </div>
</template>

<script>
import { columnsListAdd, dialogConfigAdd } from '../config-add'
import { dialogConfig } from '../config-arrival'
import { commonMixin } from '../../mixins/common'
import {
  queryFactoryListApi,
  queryMeterByVal
} from '@/api/purchase/arrival'
import {
  queryPurchaseArrivalListApi,
  addArrivalApi
} from '@/api/purchase/arrival'
import FormArrival from '../components/form-arrival.vue'
export default {
  name: 'AddArrival',
  components: { FormArrival },
  mixins: [commonMixin], // 混入公共方法和数据
  props: {
    sendRange: {
      type: Array,
      default: () => null
    },
    sendCascader: {
      type: Array,
      default: () => null
    }
  },
  created() {
    // console.log(this.sendRange)
  },
  mounted() {

  },
  data() {
    return {
      formLabelAdd: [
        { f_label: '到货日期', f_model: 'arrivalTime', f_type: 'date', f_rule: 'arrivalTime' },
        { f_label: '物资厂家', f_model: 'supplierId', f_type: 'sel', f_selList: this.sendRange },
        { f_label: '出厂日期', f_model: 'productDate', f_type: 'date' },
        { f_label: '税率', f_model: 'taxRate', f_type: 'num' },
        { f_label: '类型规格', f_model: 'typeId', f_type: 'selCas', f_rule: 'typeId', f_selList: this.sendCascader },
        { f_label: '备注', f_model: 'remark', f_type: 'ipt' },
      ],
      dialogConfig,
      columnsListAdd,
      dialogConfigAdd,
      exportList: [],
      editDialogTitle: '新购验收报告管理', // 修改时弹框标题
      extraProp: {
        purchasePrice: '',
        notaxPrice: ''
      },
      priceDex: 100
    }
  },
  methods: {
    queryPurchaseArrivalListApi,
    queryMeterByVal,
    getIdList(idList) {
      this.exportList = idList
    },
    // 删除
    delMa(data) {
      this.$modal
        .confirm('是否确认删除所选择的数据项？')
        .then(() => {
          this.$refs.tableRef.tableList.forEach((item, index) => {
            if(item.type === data.type) {
              this.$refs.tableRef.tableList.splice(index, 1)
            }
          })
        })
        .catch(() => {})
    },
    save() {
      if(this.exportList.length === 0) {
        this.$modal.msgError('请选择需要保存的机具')
      } else {
        this.exportList.forEach(item => {
          item.purchasePrice = item.purchasePrice * this.priceDex
          item.notaxPrice = item.notaxPrice * this.priceDex
          item.bpmPurchaseDetailsList = {
            name: item.name,
            typeId: item.typeId,
            unitName: item.unitName,
            purchasePrice: item.purchasePrice,
            notaxPrice: item.notaxPrice,
            taxRate: item.taxRate,
            supplierId: item.supplierId,
            productDate: item.productDate
          }
        })

        console.log(this.exportList)
        // 新增
        addArrivalApi(this.exportList).then(res => {
          console.log(res)
          this.exportList.forEach(item => {
            item.purchasePrice = item.purchasePrice / this.priceDex
            item.notaxPrice = item.notaxPrice / this.priceDex
          })
        }).catch(err => {})
      }
    }
  },
}
</script>

<style scoped>
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>
