<template>
  <div class="personne-information">
    <el-form ref="ruleForm" :key="key" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <cy-info-title>
        货物信息
        <template v-if="!cargolDisabled" slot="right">
          <span style="color: #FE7D0B; margin-right: 20px; cursor: pointer" @click="addInfo">添加</span>
          <span style="color: #FE7D0B; margin-right: 20px; cursor: pointer">模板导入</span>
          <span style="color: #FE7D0B; cursor: pointer" @click="download">下载模板</span>
        </template>
      </cy-info-title>
      <div class="table-box" style="width: 100%">
        <el-table :data="goodsInfoList">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="goodsName" label="名称" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.goodsName"
                placeholder="请输入名称"
                :disabled="cargolDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="goodsFactory" label="厂家" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.goodsFactory"
                placeholder="请输入厂家"
                :disabled="cargolDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="modelNumber" label="型号" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.modelNumber"
                placeholder="请输入型号"
                :disabled="cargolDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="units" label="单位" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.units"
                placeholder="请输入单位"
                :disabled="cargolDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.quantity"
                placeholder="请输入数量"
                :disabled="cargolDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="clearPrice" label="是否明确单价" label-class-name="rule-required">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.clearPrice"
                placeholder="请选择是否明确单价"
                style="width: 100%"
                :disabled="cargolDisabled"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </template>
          </el-table-column>
           <!-- :label-class-name="isClearPrice(scope.row.clearPrice) ? 'rule-required' : ''" -->
          <el-table-column prop="salesPrice" label="销售单价" :label-class-name="isClearPrice ? 'rule-required' : ''">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.salesPrice"
                placeholder="请输入销售单价"
                :disabled="cargolDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                placeholder="请输入备注"
                :disabled="cargolDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column v-if="!cargolDisabled" 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>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    cargolDisabled: {
      type: Boolean,
      default: false
    },
    goodsInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ruleForm: {},
      rules: {},
      key: 0,
      loading: false,
      goodsInfoList: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    isClearPrice() {
      for (let i = 0; i < this.goodsInfoList.length; i++) {
        const { clearPrice } = this.goodsInfoList[i]
        if (clearPrice) {
          return true
        }
      }
      return ''
    }
  },
  watch: {
    goodsInfo: {
      handler(newV) {
        this.goodsInfoList = this.goodsInfo
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    addInfo() {
      this.goodsInfoList.push({
        goodsName: '',
        goodsFactory: '',
        modelNumber: '',
        units: '',
        quantity: '',
        clearPrice: '',
        salesPrice: '',
        remark: ''
      })
    },
    deleteInfo(index) {
      this.goodsInfoList.splice(index, 1)
    },
    getParams() {
      return new Promise((resolve, reject) => {
        if (!this.goodsInfoList.length) {
          this.$message.warning('请添加货物信息')
          return
        }
        for (let i = 0; i < this.goodsInfoList.length; i++) {
          const { goodsName, goodsFactory, modelNumber, units, quantity, clearPrice, salesPrice } = this.goodsInfoList[i]
          if (!goodsName) {
            this.$message.warning('请输入姓名')
            return
          }
          if (!goodsFactory) {
            this.$message.warning('请输入厂家')
            return
          }
          if (!modelNumber) {
            this.$message.warning('请输入型号')
            return
          }
          if (!units) {
            this.$message.warning('请输入单位')
            return
          }
          if (!quantity) {
            this.$message.warning('请输入数量')
            return
          }
          if (clearPrice === '') {
            this.$message.warning('请选择是否明确单价')
            return
          }
          if (clearPrice === 1) {
            if (!salesPrice) {
              this.$message.warning('请输入销售单价')
              return
            }
          }
        }
        const params = {
          goodsInfoList: this.goodsInfoList
        }
        resolve(params)
      })
    }
  }
}
</script>

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

}
</style>
