<template>
  <div class="personne-information" v-loading="isLoading">
    <el-form ref="ruleForm" :key="key" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <cy-info-title>
        货物信息
        <template slot="right">
          <span style="color: #FE7D0B; margin-right: 20px; cursor: pointer" @click="addInfo">选择货物</span>
        </template>
      </cy-info-title>
      <div class="table-box" style="width: 100%">
        <el-table :data="businessInfo.list">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="goodsName" label="名称" label-class-name="rule-required"></el-table-column>
          <el-table-column prop="goodsFactory" label="厂家" label-class-name="rule-required"></el-table-column>
          <el-table-column prop="modelNumber" label="型号" label-class-name="rule-required"></el-table-column>
          <el-table-column prop="units" label="单位" label-class-name="rule-required"></el-table-column>
          <el-table-column prop="quantity" label="数量" label-class-name="rule-required"></el-table-column>
          <el-table-column prop="price" label="暂定单价"></el-table-column>
          <el-table-column prop="remark" label="备注">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                placeholder="请输入备注"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span style="color: #FE7D0B; cursor: pointer;" @click="deleteInfo(scope.$index)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <cy-dialog ref="chooseGood" title="选择货物">
      <choose-goods ref="goodsTable" :info="businessInfo"></choose-goods>
      <template slot="footer">
        <el-button @click="$refs.chooseGood.show = false">关闭</el-button>
        <el-button type="primary" @click="confirmGoods">确定</el-button>
      </template>
    </cy-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { calculateMoney } from '@/api/myTrade/purchaseContractManagement/purchaseContractManagement'
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    canChoooseGoods: {
      type: Boolean,
      default: false
    }
  },
  components: {
    ChooseGoods: () => import('./ChooseGoods'),
  },
  data() {
    return {
      ruleForm: {},
      rules: {},
      key: 0,
      loading: false,
      businessInfo: {
        businessNumber: '',
        info: {},
        list: []
      },
      isLoading: false
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
    // isClearPrice() {
    //   return (clearPrice) => {
    //     if (clearPrice) {
    //       return true
    //     } else {
    //       return false
    //     }
    //   }
    // }
  },
  watch: {
    'info.mathId': {
      handler(newV) {
        if (newV) {
          console.log(this.info)
          this.businessInfo.list = [ ...this.info.purchContractGoodsInfoList ]
          this.businessInfo.businessNumber = this.info.basicInfo.businessNumber
          this.businessInfo.info = {
            accrualMarginCalcMethod: this.info.purchContractPriceRule.accrualMarginCalcMethod,
            tradePlatformOffer: this.info.purchContractPriceRule.tradePlatformOffer,
            factoringOffer: this.info.purchContractPriceRule.factoringOffer,
            factoringFinanceDeadline: this.info.purchContractPriceRule.factoringFinanceDeadline,
            differAmount: this.info.purchContractPriceRule.differAmount,
            monthlyInterestRate: this.info.purchContractPriceRule.monthlyInterestRate
          }
          console.log(this.businessInfo)
        }
      },
      immediate: true
    },
    canChoooseGoods: {
      handler(val) {
        if(val) {
          this.$refs.chooseGood.show = true
        }
      },
      immediate: true
    }
  },
  created() {
    window.$bus.$on('change', msg => {
      this.businessInfo.businessNumber = msg.businessNumber || ''
    })
    window.$bus.$on('methodChange', msg => {
      this.businessInfo.info = { ...msg }
      this.businessInfo.list = []
    })
  },
  methods: {
    addInfo() {
      if(!this.businessInfo.businessNumber) {
        this.$message.error('请先选择项目')
        return
      }
      this.$emit('validateEmpty')
    },
    deleteInfo(index) {
      this.businessInfo.list.splice(index, 1)
    },
    getParams() {
      return new Promise((resolve, reject) => {
        if (!this.businessInfo.list.length) {
          this.$message.warning('请添加货物信息')
          return
        }
        const params = {
          goodsInfoList: this.businessInfo.list
        }
        resolve(params)
      })
    },
    confirmGoods() {
      if(this.$refs.goodsTable.selectedInfos.length === 0) {
        this.$message.error('请选择货物')
        return
      }
      this.$refs.chooseGood.show = false
      this.calculate(this.$refs.goodsTable.selectedInfos)
    },
    calculate(list) {
      let data = {
        salesContractSupplementGoodsInfos: [ ...list ],
        priceRule: { ...this.businessInfo.info }
      }
      this.isLoading = true
      calculateMoney(data).then(({ data }) => {
        this.businessInfo.list = [ ...data ]
        this.isLoading = false
      }, () => {
        this.isLoading = false
      })
    },
    validate() {
      return new Promise((resolve, reject) => {
        if(this.businessInfo.list.length > 0) {
          resolve()
        } else {
          this.$message.error('请选择货物')
          reject()
        }
      })
    }
  },
  beforeDestroy() {
    window.$bus.$off('change')
    window.$bus.$off('methodChange')
  }
}
</script>

<style lang="scss" scoped>
.personne-iInformation {

}
</style>
