<!--  -->
<template>
  <div style="height: 100%" class="flexStar">
    <div class="boxswai" style="width: 50%; padding-left: 0px">
      <div class="boxnei" style="display: flex; flex-direction: column">
        <avue-crud :data="data"
                   ref="crud"
                   :option="option"
                   :page.sync="page"
                   v-model="form"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @row-del="rowDel"
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   @on-load="onLoad"
                   @row-click="rowClick1"
        >
          <template slot="menuLeft">
            <span style="font-weight: bold;"> 系统中期支付项列表</span>

          </template>
          <template slot="menuRight">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">添加中期支付项</el-button>
          </template>

          <!-- 合同公式 -->
          <template
            slot-scope="{type}"
            slot="key11Form"
          >
            <div class="flexStar">
              <el-input :disabled="true" v-model="form.contractFormulaIds"
                        style="width: 70%;margin-right: 10px;"></el-input>
              <el-link type="primary" @click="handleaddFormula">添加公式</el-link>
              <el-link type="primary" class="marleft10">删除公式</el-link>
            </div>
          </template>
          <template
            slot-scope="{type}"
            slot="key12Form"
          >
            <div class="flexStar">
              <el-input :disabled="true" v-model="form.updateFormulaIds"
                        style="width: 70%;margin-right: 10px;"></el-input>
              <el-link type="primary" @click="handleaddFormula">添加公式</el-link>
              <el-link type="primary" class="marleft10">删除公式</el-link>
            </div>
          </template>
          <template
            slot-scope="{type}"
            slot="key13Form"
          >
            <div class="flexStar">
              <el-input :disabled="true" v-model="form.currentFormulaIds"
                        style="width: 70%;margin-right: 10px;"></el-input>
              <el-link type="primary" @click="handleaddFormula">添加公式</el-link>
              <el-link type="primary" class="marleft10">删除公式</el-link>
            </div>
          </template>

        </avue-crud>
        <!-- 添加公式弹窗 -->
        <el-dialog
          title="添加公式"
          :visible.sync="addFormuladialog"
          append-to-body
          width="60%"
          :before-close="formuladialogClose">

          <avue-crud :data="fordata"
                     :option="foroption"
                     :page.sync="forpage"
                     @row-click="rowClick"
                     @on-load="foronLoad">
            <template slot="menuLeft">
              <div class="flex" style="align-items: center;">
                <span style="white-space: nowrap;"> 公式分类：</span>
                <el-select v-model="forType" placeholder="请选择">
                  <el-option
                    v-for="item in forOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </template>
            <template #radio="{row}">
              <el-radio v-model="selectRow"
                        :label="row.$index">{{ row.$index + 1 }}
              </el-radio>
            </template>

          </avue-crud>
          <span slot="footer" class="dialog-footer">
                  <el-button @click="addFormuladialog = false">取 消</el-button>
                  <el-button type="primary" @click="addFormuladialog = false">确 定</el-button>
                </span>
        </el-dialog>

      </div>
    </div>

    <div
      class="boxswai"
      style="width: 50%; padding-left: 0px; padding-right: 0px"
    >
      <div class="boxnei" style="padding-top: 0px;">

        <form id="inputForm" action="" method="post" class="form-horizontal">
          <h4>详情信息</h4>
          <table class="table-form" style="width: 100%;">
            <tbody>
            <tr>
              <td class="tit" width="20%">支付项编号：</td>
              <td id="code">{{ curRow.payNumber || '' }}</td>
              <td class="tit" width="20%">支付项名称：</td>
              <td id="itemName">{{ curRow.payName || '' }}</td>
            </tr>
            <tr>
              <td class="tit" width="20%">支付项类型：</td>
              <td id="itemType">{{ curRow.payTypeName || "" }}</td>
              <td class="tit" width="20%">是否为扣款项：</td>
              <td id="negative">{{ curRow.isDeduct === 1 ? '是' : '否' || '' }}</td>
            </tr>
            <tr>
              <td class="tit" width="20%">是否合计项：</td>
              <td id="sumItem">{{ curRow.isTotalTerms === 1 ? '是' : '否' || '' }}</td>
              <td class="tit" width="20%">是否显示百分比：</td>
              <td id="showPercent">{{ curRow.isShowPercent === 1 ? '是' : '否' || '' }}</td>
            </tr>
            <tr>
              <td class="tit" width="20%">是否手动输入：</td>
              <td id="useHand">{{ curRow.isManualInput === 1 ? '是' : '否' || '' }}</td>
              <td class="tit" width="20%">排序号：</td>
              <td id="orderNum">{{ curRow.sort || '' }}</td>
            </tr>
            <tr>
              <td class="tit" width="20%">合同计算公式名称：</td>
              <td colspan="3" id="contractCalcName">章清单合同原总金额</td>
            </tr>
            <tr>
              <td class="tit" width="20%">变更计算公式名称：</td>
              <td colspan="3" id="alterationCalcName">章清单变更金额</td>
            </tr>
            <tr>
              <td class="tit" width="20%">本期计算公式名称：</td>
              <td colspan="3" id="calcName">章清单本期完成金额</td>
            </tr>
            <tr>
              <td class="tit" width="10%">备注：</td>
              <td colspan="3" id="remark">{{ curRow.remarks || '' }}</td>
            </tr>
            </tbody>
          </table>

        </form>

        <div class="totalbox">
          <avue-crud :data="totaldata" :option="totaloption" @row-del="rowDel1">
            <template slot="menuLeft">
              <span style="font-weight: bold;margin-right: 5px;">汇总项</span>
              <el-link type="primary" size="small"
                       icon="el-icon-plus"
                       @click="addTotal">添加汇总项
              </el-link>
            </template>
          </avue-crud>
        </div>
      </div>
    </div>
    <!-- 添加汇总项弹窗 -->
    <el-dialog
      append-to-body
      title="添加汇总项"
      :visible.sync="tatoldialogVisible"
      width="50%"
      :before-close="handleTatolClose">
      <avue-crud :data="tadddata"
                 :option="taddoption"
                 @selection-change="selectionChange"

      >

      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tatoldialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="rowSave1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getList, update, remove, add, getDetail, addPay, removePay, getAllList} from "@/api/measure/interimPay.js";
import {getDictionary} from "@/api/system/dict";

export default {
  data() {
    return {
      page: {
        pageSize: 20,
        pagerCount: 5
      },
      query: {},
      form: {},
      data: [],
      option: {
        height: 'auto',
        refreshBtn: false,
        columnBtn: false,
        addBtn: false,
        tip: false,
        border: true,
        index: true,
        dialogWidth: 1000,
        calcHeight: 30,
        addBtnText: '新增支付项',
        menuWidth: 140,

        dialogClickModal: false,
        column: [
          {
            span: 24,
            labelWidth: 130,
            label: '支付项编号',
            prop: 'payNumber'
          },
          {
            span: 24,
            labelWidth: 130,
            label: '支付项名称',
            prop: 'payName',
            rules: [{
              required: true,
              message: "请输入名称",
              trigger: "blur"
            }]
          },
          {
            span: 24,
            labelWidth: 130,
            label: '支付项类型',
            prop: 'payType',
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=meter_pay_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            rules: [{
              required: true,
              message: "选择类型",
              trigger: "blur"
            }]
          },
          {
            span: 24,
            labelWidth: 130,
            label: '合同计算公式名称',
            prop: 'key11',
            disabled: true,
            hide: true,
            // formslot: true,
            // slot: true


          },
          {
            span: 24,
            labelWidth: 130,
            label: '变更计算公式名称',
            prop: 'key12',
            disabled: true,
            hide: true,
          },
          {
            span: 24,
            labelWidth: 130,
            label: '本期计算公式名称',
            prop: 'key13',
            disabled: true,
            hide: true,
          },
          {
            span: 24,
            labelWidth: 130,
            label: '是否为扣款项',
            prop: 'isDeduct',
            type: "select",

            dicData: [
              {
                label: "否",
                value: 0
              },
              {
                label: "是",
                value: 1
              }
            ],

          },
          {
            span: 24,
            labelWidth: 130,
            label: '是否加粗',
            prop: 'isBoldText',
            type: "select",
            hide: true,
            dicData: [
              {
                label: "否",
                value: 0
              },
              {
                label: "是",
                value: 1
              }
            ],

          },
          {
            span: 24,
            labelWidth: 130,
            label: '是否手动输入',
            hide: true,
            prop: 'isManualInput',
            type: "select",
            dicData: [
              {
                label: "否",
                value: 0
              },
              {
                label: "是",
                value: 1
              }
            ],

          },
          {
            span: 24,
            labelWidth: 130,
            label: '是否显示百分比',
            hide: true,
            prop: 'isShowPercent',
            type: "select",
            dicData: [
              {
                label: "否",
                value: 0
              },
              {
                label: "是",
                value: 1
              }
            ],

          },
          {
            labelWidth: 130,
            hide: true,
            span: 24,
            label: '是否合计项',
            prop: 'isTotalTerms',
            type: "select",
            dicData: [
              {
                label: "否",
                value: 0
              },
              {
                label: "是",
                value: 1
              }
            ],
          },
          {
            labelWidth: 130,
            span: 24,
            label: '支付适用类型',
            prop: 'payApplicableType',
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=meter_pay_applicable_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",

          },
          {
            span: 24,
            hide: true,
            labelWidth: 130,
            label: '排序号',
            prop: 'sort',

          },
          {
            span: 24,
            hide: true,
            labelWidth: 130,
            label: '备注',
            prop: 'remarks',
            type: "textarea",

          },
        ],

      },
      curRow: {},
      addFormuladialog: false,
      forpage: {
        pageSize: 20,
        pagerCount: 5
      },
      fordata: [],
      foroption: {
        border: true,
        align: 'center',
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,


        column: [
          {
            label: '选择',
            prop: 'radio',
            width: 60,
            hide: false
          },
          {
            label: '公式编号',
            prop: 'name'
          },
          {
            label: '公式名称',
            prop: 'sex'
          },
          {
            label: '公式备注',
            prop: 'key3'
          }
        ]
      },

      selectRow: '',
      forType: '',
      forOptions: [
        {
          value: '选项1',
          label: '公路计量'
        }, {
          value: '选项2',
          label: '监理服务'
        },
      ],
      totaldata: [],
      totaloption: {
        rowKey: 'id',
        refreshBtn: false,
        columnBtn: false,
        editBtn: false,
        border: true,
        index: true,
        height: 'auto',
        calcHeight: 90,
        menuWidth: 80,

        addBtn: false,
        column: [
          {
            label: '支付项编号',
            prop: 'payNumber'
          }, {
            label: '支付项名称',
            prop: 'payName'
          },
          {
            label: '支付项类型',
            prop: 'payType',
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=meter_pay_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
          },
          {
            label: '合同计算公式',
            prop: 'contractFormulaIds'
          },
          {
            label: '变更计算公式',
            prop: 'updateFormulaIds'
          },
          {
            label: '本期计算公式',
            prop: 'currentFormulaIds'
          },
          {
            label: '是否为扣款项',
            prop: 'isDeduct',
            type: "select",
            dicData: [
              {
                label: "否",
                value: 0
              },
              {
                label: "是",
                value: 1
              }
            ],

          },
        ],

      },
      tatoldialogVisible: false,
      tadddata: [
        {
          ids: 1,
          name: '200',
          sex: '200章',
          key3: '否',
          key4: '否',
          key5: '承包商'
        }, {
          ids: 1,
          name: '200',
          sex: '200章',
          key3: '否',
          key4: '否',
          key5: '承包商'
        },
        {
          ids: 1,
          name: '200',
          sex: '200章',
          key3: '否',
          key4: '否',
          key5: '承包商'
        }, {
          ids: 1,
          name: '200',
          sex: '200章',
          key3: '否',
          key4: '否',
          key5: '承包商'
        },

        {
          ids: 1,
          name: '200',
          sex: '200章',
          key3: '否',
          key4: '否',
          key5: '承包商'
        },
      ],
      taddoption: {
        delBtn: false,
        editBtn: false,
        addBtn: false,
        columnBtn: false,
        refreshBtn: false,
        border: true,
        selection: true,
        index: true,
        menu: false,
        column: [
          {
            label: '支付项编号',
            prop: 'payNumber'
          }, {
            label: '支付项名称',
            prop: 'payName'
          },
          {
            label: '支付项类型',
            prop: 'payType',
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=meter_pay_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
          },
          {
            label: '合同计算公式',
            prop: 'contractFormulaIds'
          },
          {
            label: '变更计算公式',
            prop: 'updateFormulaIds'
          },
          {
            label: '本期计算公式',
            prop: 'currentFormulaIds'
          },
          {
            label: '是否为扣款项',
            prop: 'isDeduct',
            type: "select",
            dicData: [
              {
                label: "否",
                value: 0
              },
              {
                label: "是",
                value: 1
              }
            ],


          },
        ],
      },
      selectList: [],
      payList: [],
    }
  },
  methods: {
    onLoad(page, params = {}) {

      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        if (this.data.length > 0) {
          this.rowClick1(this.data[0])
        }

      });
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    //删除中期支付项
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    rowClick1(row) {
      getDetail(row.id).then((res) => {
        this.curRow = Object.assign({}, res.data.data);
        this.getPayType(this.curRow.payType)
        this.totaldata = this.curRow.summaryItemList
      })
    },

    handleAdd() {
      this.$refs.crud.rowAdd();
    },
    handleaddFormula() {
      this.addFormuladialog = true
    },
    formuladialogClose() {
      this.addFormuladialog = false
    },
    foronLoad(page) {
      this.forpage.total = 40
      //模拟分页
      if (this.forpage.currentPage === 1) {
        this.fordata = [
          {
            id: 1,
            name: 'advance_HT',
            sex: '动员预付款合同金额',
            key3: '单独使用计量期,取本期内动员预付款支付的金额汇总，定制动员预付款计量期模块专用'
          }, {
            id: 2,
            name: 'advance_HT',
            sex: '动员预付款合同金额',
            key3: '单独使用计量期,取本期内动员预付款支付的金额汇总，定制动员预付款计量期模块专用'
          }
        ]
      }
    },
    rowClick(row) {
      this.selectRow = row.$index
      this.$message.success('选择序号' + row.$index)
    },
    addTotal() {
      console.log('xin');
      this.tatoldialogVisible = true
      getAllList({projectId: "1", recordId: this.curRow.id}).then((res) => {
        this.tadddata = res.data.data
      })
    },
    handleTatolClose() {
      this.tatoldialogVisible = false
    },
    //删除汇总项
    rowDel1(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return removePay({
            id: this.curRow.id,
            bindId: row.id
          });
        })
        .then(() => {
          this.onLoad(this.page);
          getDetail(this.curRow.id).then((res) => {
            this.curRow = Object.assign({}, res.data.data);
            this.totaldata = this.curRow.summaryItemList
          })
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    selectionChange(list) {
      this.selectList = list
    },
    ids(arr) {
      let ids = [];
      arr.forEach(ele => {
        ids.push(ele.id);

      });
      return ids.join(",");
    },
    //增加汇总项
    rowSave1(row, done, loading) {
      addPay({
        bindIds: this.ids(this.selectList),
        id: this.curRow.id
      }).then(() => {
        this.onLoad(this.page);
        getDetail(this.curRow.id).then((res) => {
          this.curRow = Object.assign({}, res.data.data);
          this.totaldata = this.curRow.summaryItemList
        })
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
      this.tatoldialogVisible = false
    },
    getPayList() {
      getDictionary({
        code: 'meter_pay_type'
      }).then((res) => {
        this.payList = res.data.data;
        this.payList.forEach((ele) => {
          ele.dictKey = Number(ele.dictKey)
        })
      })
    },
    //获取支付项类型名称
    getPayType(type) {
      this.payList.forEach((ele) => {
        if (ele.dictKey == type) {
          this.curRow.payTypeName = ele.dictValue
        }
      })
    }
  },
  mounted() {
    this.getPayList()
  }
}
</script>
<style lang='scss' scoped>

.form-horizontal .table-form, .form-horizontal .table-form td {
  border: 1px solid #ddd;
  background-color: #fdfdfd;
  font-size: 14px;
  padding: 4px;
}

.totalbox {
  width: 100%;
  margin-top: 20px;


}
</style>
