<template>
  <div>
    <div class="flex title-div">
      <span>费用明细</span>
      <a-button type="primary" @click.stop="addEvt" v-if="!id">新增</a-button>
    </div>
    <a-table :columns="columns" :data-source="dataList" :pagination="false">
      <template slot="itemCode" slot-scope="text">
        {{formatProject(text)}}
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <a-button type="link" @click.stop="editEvt(index)" v-if="!id">修改</a-button>
        <a-button type="link" class="danger" @click.stop="delRecord(index)" v-if="!id">删除</a-button>
      </template>
      <template slot="footer">
        <div class="flex footer-div">
          <span>预计总费用:</span>
          <span class="money">{{totalMoney}}</span>
        </div>
      </template>
    </a-table>

    <a-modal title="编辑" :visible="dialogShow" width="700px" :maskClosable="false"
      okText="确定" cancelText="取消"
      @ok="handleEditOK" @cancel="dialogShow = false">
      <a-form-model ref="editForm" :model="editFormObj" :rules="editRules">
        <a-row :gutter="30">
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="预授权项目" prop="itemCode">
              <a-select v-model="editFormObj.itemCode" placeholder="请选择预授权项目" allowClear>
                <a-select-option v-for="(item,i) in ProjectList" :key="i" :value="item.refcd">{{item.descCh}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="单价" prop="salePrice">
              <a-input type="number" v-model.trim="editFormObj.salePrice" placeholder="单价" @change="priceChange" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="次数" prop="times">
              <a-input type="number" v-model.trim="editFormObj.times" placeholder="次数" @change="priceChange" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="总价" prop="totalAmount">
              <a-input type="number" v-model.trim="editFormObj.totalAmount" placeholder="总价" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
export default{
  props: {
    id: {
      default: ''
    },
    ProjectList: {
      default: []
    }
  },
  data(){
    const columns = [
      { title: "预授权项目", dataIndex: "itemCode", key:"itemCode",align:'center',scopedSlots: { customRender: "itemCode" }},
      { title: "单价", dataIndex: "salePrice", key:"salePrice",align:'center'},
      { title: "次数", dataIndex: "times" },
      { title: "总价", dataIndex: "totalAmount"},
      { title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" }, fixed: "right", width: "200px", align: 'center'},
    ];
    return{
      dialogShow: false,
      columns,
      dataList: [],
      chooseIdex: -1,
      editFormObj: {
        itemCode: '',
        salePrice: '',
        times: '',
        totalAmount: '',
      },
      editRules: {
        itemCode: [{ required: true, message: "请输入", trigger: "change" }],
        salePrice: [{ required: true, message: "请输入", trigger: "blur" }],
        times: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    }
  },
  computed: {
    //预计总费用
    totalMoney(){
      let money = 0;
      this.dataList.forEach((item)=>{
        money += item.totalAmount||0;
      })
      return money;
    }
  },
  methods: {
    //过滤project
	  formatProject(val){
			if (!val) {
			  return;
			}
			const item = this.ProjectList.find((item) => {
			  return item.refcd == val;
			});
			return item? item.descCh: "";
		},
    //新增
    addEvt(){
      this.editEvt(-1)
    },
    /** 修改 * **/
    editEvt(idx) {
      this.chooseIdex = idx;
      let record = this.dataList[idx] || {};
      this.editFormObj = {
        itemCode: record.itemCode || "",
        salePrice: record.salePrice || "",
        times: record.times
      };
      this.dialogShow = true;
    },
    //删除记录
    delRecord(index) {
      this.$modal.confirm({
        title: "删除",
        content: "确定删除该条记录？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          this.$message.success("删除成功");
          this.dataList.splice(index, 1);
        },
        onCancel: () => {},
      });
    },
    //编辑保存
    handleEditOK() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          if(this.chooseIdex == -1){ //新增
            this.dataList.push({...this.editFormObj})
          }else{ //修改
            this.dataList.splice(this.chooseIdex, 1, {...this.editFormObj});
          }
          this.dialogShow = false;
          this.$emit('authorizeItemVoListChange', this.dataList);
        }
      });
    },
    priceChange(){
      this.editFormObj.totalAmount = Number(this.editFormObj.salePrice||0) * Number(this.editFormObj.times||0)
    }
  }
}
</script>

<style lang="less" scoped>

.title-div {
  line-height: 56px;
  color: #252631;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
}
.footer-div{
  font-weight: bold;
  .money{
    color: red;
    margin-left: 8px;
  }
}
</style>