<template>
  <el-form ref="spareInfoRef">
    <headerTitle :title="title" style="margin-top: 15px"></headerTitle>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="tableList"
      row-key="id"
      height="30vh"
      :needPage="false"
    >
      <!--  <template v-slot:toolbar v-if="types != 'view'"> *** -->
      <template v-slot:toolbar>
        <div class="toobar" :class="types != 'view'?'':'toobar_r'">
          <div v-if="types != 'view'" class="add-product" @click="addEquipment">
            <i class="el-icon-circle-plus-outline"></i>
          </div>
          <div class="total_price">总计: {{ totalPrice }} (元)</div>
        </div>
      </template>

      <template v-slot:totalCount="{ row, $index }">
        <el-input
          type="number"
          placeholder="请输入"
          v-model="row.totalCount"
          @input="handleInput(row, $index,'totalCount')"
          min="0"
          :disabled="types == 'view'"
        />
      </template>
      <template v-slot:singlePrice="{ row, $index }">
        <el-input
          type="number"
          placeholder="请输入"
          v-model="row.singlePrice"
          @input="handleInput(row, $index,'singlePrice')"
          min="0"
          :disabled="types == 'view'"
        />
      </template>
      <template v-slot:action="{ row,$index }">
        <el-popconfirm
          v-if="types != 'view'"
          class="ele-action"
          title="确定要删除吗？"
          @confirm="del(row.id,$index)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">删除</el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <AssetsDialog ref="selectStockLedgerDialogRef" :assetType="6" @choose="confirmChoose"></AssetsDialog>
  </el-form>
</template>

<script>
import AssetsDialog from '../../components/AssetsDialog.vue';
export default {
  components: {
    AssetsDialog
  },
  props: {
    detailList: {
      type: Array,
      default: () => []
    },
    types: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '配件信息'
    }
  },
  watch: {
    detailList: {
      handler(newVal) {
        this.tableList = JSON.parse(JSON.stringify(newVal));;
        this.calculatePrice();
      },
      immediate: true
    }
  },
  data() {
    return {
      tableList: [],
      columns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },

        {
          prop: 'categoryCode',
          label: '物品编码',
          align: 'center'
        },
        {
          prop: 'categoryName',
          label: '物品名称',
          align: 'center'
        },

        {
          prop: 'categoryModel',
          label: '型号',
          align: 'center'
        },
        {
          prop: 'specification',
          label: '规格',
          align: 'center'
        },
        {
          prop: 'level',
          label: '级别',
          align: 'center'
        },
        {
          prop: 'totalCount',
          label: '数量',
          align: 'center',
          width: 100,
          slot: 'totalCount'
        },
        {
          prop: 'singlePrice',
          label: '单价',
          align: 'center',
          width: 100,
          slot: 'singlePrice'
        },
        {
          prop: 'totalPrice',
          label: '总价',
          align: 'center',
          width: 100
        },
        //   {
        //     prop: 'measureQuantity',
        //     label: '库存',
        //     align: 'center'
        //   },
        {
          prop: 'measureUnit',
          label: '计量单位',
          align: 'center'
        },
        {
          prop: 'warehouseName',
          label: '仓库',
          align: 'center'
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 140,
          align: 'center',
          resizable: false,
          fixed: 'right',
          slot: 'action',
          showOverflowTooltip: true,
          show: this.types != 'view'
        }
      ],
      totalPrice: 0 // 总计
    };
  },
  mounted() {
    this.tableList = JSON.parse(JSON.stringify(this.detailList));
  },
  methods: {
    // 出库数量限制 totalPrice
    handleInput(row, index ,name) {
      row[name] = row[name].replace(/[^\d]/g, '').replace(/^0+/, '') || '0';
      if (!row.singlePrice || !row.totalCount) {
        this.$set(this.tableList[index], 'totalPrice', 0);
        return;
      }
      if (row.singlePrice == 0) {
        this.$set(this.tableList[index], 'totalPrice', 0);
      } else {
        this.$set(
          this.tableList[index],
          'totalPrice',
          Number(row.singlePrice) * Number(row.totalCount)
        );
      }
      // 计算汇总价格 ***
      this.calculatePrice();
    },
    // 计算汇总价格 ***
    calculatePrice() {
      let totlal = 0;
      this.tableList.map((el) => (totlal += el.totalPrice || 0));
      this.totalPrice = totlal;
    },
    del(id, index) {
      // this.tableList = this.tableList.filter((item) => item.id != id);
      this.tableList.splice(index, 1);
    },
    async addEquipment() {
      // const res = await parameterGetByCode({
      //   code: 'after_sales_accessory_source'
      // });
      // 配件回收清单进来的时候需要 查主数据
      if (this.title == '配件回收清单') {
        this.$refs.selectStockLedgerDialogRef.open(this.tableList, '1');
      } else {
        this.$refs.selectStockLedgerDialogRef.open(this.tableList, '0');
      }
    },
    confirmChoose(data) {
      data.map((item) => {
        item.singlePrice = item.unitPrice;
        delete item.id;
        return {
          ...item
        };
      });
      this.tableList = JSON.parse(JSON.stringify(data));
    },
    getSpareData() {
      return this.tableList;
    }
  }
};
</script>

<style lang="scss" scoped>
.add-product {
  // width: 70%;
  display: flex;
  align-items: center;
  // justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}

.toobar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 16px;

  .total_price {
    margin-left: 24px;
    min-width: 50px;
  }
}

.toobar_r {
  justify-content: flex-end;
}
</style>