<template>
  <div>
    <el-card class="el-card" style="margin-left: 15px;margin-top: 10px">
      <el-form :inline="true" :model="filterQuery" size="mini">
        <el-form-item class="query-form-item" label="系统标识:">
          <el-input
            v-model="filterQuery.thirdId"
            placeholder="系统标识"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="query-form-item" label="系统名称:">
          <el-input
            v-model="filterQuery.thirdName"
            placeholder="系统名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="query-form-item" label="状态:">
          <el-select v-model="filterQuery.enabled" placeholder="状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="已启用" value=1></el-option>
            <el-option label="未启用" value=0></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list" style="width: 100%" border
                @current-change="handleCurrentChange" highlight-current-row>
        <el-table-column label="序号" type="index" width="120"></el-table-column>
        <el-table-column label="系统标识" prop="thirdId"></el-table-column>
        <el-table-column label="系统名称" prop="thirdName"></el-table-column>
        <el-table-column label="系统启用" prop="enabled">
          <template slot-scope="scope">
            <span>{{ enableMap[scope.row.enabled] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否主系统" prop="mainSys">
          <template slot-scope="scope">
            <span>{{ enableMap[scope.row.mainSys] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.stop="handleModifyClick(scope.row)"
            >编辑
            </el-button
            >
            <el-button
              type="text"
              size="small"
              @click.native.stop="handleAddInterface(scope.row)"
            >添加接口
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="接口设置-第三方系统设置"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="modifyDialogVisible"
        width="60%"
      >
        <modifyDialog :inputQuery="inputQuery"></modifyDialog>
        <div style="text-align: center; margin-top: 10px;">
          <el-button type="primary" size="small" icon="search" @click="onModifySubmit"
          >提交
          </el-button
          >
          <el-button type="primary" size="small" icon="search" @click="cancelDialog"
          >取消
          </el-button
          >
        </div>
      </el-dialog>
    </el-card>
    <el-card class="el-card">
      <el-table v-loading="loading" :data="detailList" style="width: 100%" border highlight-current-row
                @current-change="handleBustypeChange">
        <el-table-column label="序号" type="index" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="接口名称" prop="name" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="接口启用" prop="enabled">
          <template slot-scope="scope">
            <span>{{ enableMap[scope.row.enabled] }}</span>
          </template>
        </el-table-column>

        <el-table-column label="数据来源" prop="enabled">
          <template slot-scope="scope">
            <span>{{ dataMap[scope.row.fromType] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>
        <el-table-column label="接口地址" prop="value" width="400" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.stop="handleDetailModifyClick(scope.row)"
            >编辑
            </el-button
            >
            <el-button
              type="text"
              size="small"
              @click.native.stop="disableInterface(scope.row)"
            >移除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="接口设置-参数设置"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="modifyDetailDialogVisible"
        width="60%"
        v-if="modifyDetailDialogVisible"
      >
        <modifyDetailDialog :inputDetailQuery="inputDetailQuery"></modifyDetailDialog>
        <div style="text-align: center">
          <el-button type="primary" size="small" icon="search" @click="onDetailModifySubmit"
          >提交
          </el-button
          >
          <el-button type="primary" size="small" icon="search" @click="cancelInterfaceDialog"
          >取消
          </el-button
          >
        </div>
      </el-dialog>
    </el-card>
    <el-card class="el-card" v-if="addBussinessTypeBtnVisible">
      <el-button type="primary" style="float: right; margin-bottom: 15px;"
                 @click="addBussinessType">添加单据类型
      </el-button>
      <el-table v-loading="busTypeLoading" :data="busTypeList" style="width: 100%;"
                highlight-current-row="true" border>
        <el-table-column label="序号" type="index" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="单据类型" prop="name" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="第三方单据类型" prop="thirdBuyName"></el-table-column>
        <el-table-column label="接口地址" prop="url" width="400" show-overflow-tooltip></el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>

        <el-table-column label="操作" width="200" prop="price">
          <template slot-scope="scope">
            <el-button v-if="submitOrderVisible"
                       type="text"
                       size="small"
                       @click="handleEdit(scope.$index, scope.row)"
            >编辑
            </el-button>
            <el-button v-if="getOrdersEditBtnVisible"
                       type="text"
                       size="small"
                       @click="editGeOrderParam(scope.$index, scope.row)"
            >编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div style="margin-top: 18px ;  color: #F71616; margin-left: 20px; font-size: 13px">
      <span>重要提示：本页功能仅供技术提供方修改&nbsp;</span>
    </div>

    <!--业务单据提交编辑弹窗-->
    <el-dialog
      :title="formMap[formName]"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="bussinessTypeFormVisible"
      width="45%"
    >
      <DialogEditBusUpload :thirdBuyForm="thirdBuyForm"
                           :closeDialog="closeDialog"></DialogEditBusUpload>

    </el-dialog>

    <!--业务单据查询编辑弹窗-->
    <el-dialog
      :title="searchFormMap[formName]"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="editGeOrderParamVisible"
      width="45%"
    >
      <DialogEditBusDown :thirdBuyForm="thirdBuyForm"
                         :closeDialog="closeDialog"></DialogEditBusDown>

    </el-dialog>
    <el-dialog
      title="接口设置-添加接口"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="addInterfaceVisible"
      style="width: 100%"
    >
      <el-table :data="thirdSysDetailList" style="width: 100%;" @selection-change="selectedInterface" border>
        <el-table-column type="selection" :reserve-selection="false" width="55"></el-table-column>
        <el-table-column prop="name" label="接口名称"></el-table-column>
        <el-table-column prop="value" label="接口地址"></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addInterfaceVisible = !addInterfaceVisible"
        >取消
        </el-button
        >
        <el-button
          type="primary"
          @click.native="addInterfaceData()"
        >提交
        </el-button>
      </div>
    </el-dialog>

  </div>


</template>
<script>
import {
  getBasicThirdSys,
  updateBasicThirdSys, getDetailBasicThirdSys, updateDetailBasicThirdSys, filterBusTypeDetail, saveBusTypeDetail,
  saveBusTypes, deleteThirdSysBusType, updateInterfaceStatus
} from "@/api/thrsys/basicThirdSys";

import {getOriginBusType} from "@/api/basic/busOriginType";
import modifyDialog from "./BasicThirdSysModify";
import DialogEditBusDown from "./DialogEditBusDown";
import DialogEditBusUpload from "./DialogEditBusUpload";
import modifyDetailDialog from "./BasicThirdSysDetailModify";
import {filterForThirdSys} from "@/api/basic/busType";
import {isBlank} from "@/utils/strUtil";

export default {
  data() {
    return {
      filterQuery: {
        thirdId: "",
        thirdName: "",
        enabled: "1",
        page: 1,
        limit: 20,
      },
      modifyDialogVisible: false,
      modifyDetailDialogVisible: false,
      modifyBusYypeDialogVisible: false,
      list: [],
      inputQuery: null,
      inputDetailQuery: null,
      inputBusTypeQuery: null,
      enableMap: {
        true: "是",
        false: "否",
      },
      dataMap: {
        0: "接口实时获取",
        1: "文件方式",
        2: "第三方上传缓存",
        3: "接口方式"
      },
      formMap: {
        edit: "单据提交-编辑单据类型",
        add: "单据提交-添加单据类型"
      },

      searchFormMap: {
        edit: "单据查询-编辑单据类型",
        add: "单据查询-添加单据类型"
      },
      formName: null,
      detailList: null,
      busTypeList: [],
      total: 0,
      loading: false,
      busTypeLoading: false,
      currentCheckIndex: -1,
      bussinessTypeFormVisible: false,

      addBussinessTypeBtnVisible: false,
      editGeOrderParamVisible: false,
      addInterfaceVisible: false,
      getOrdersEditBtnVisible: false,
      submitOrderVisible: false,
      selectBussinessTypeList: [],
      thirdSysFk: null,
      submitOrderRow: null,
      thirdBuyForm: {
        id: null,
        thirdBuyName: null,
        thirdBuyCode: null,
        name: null,
        code: null,
        type: null,
        thirdSys: null,
        url: null,
        remark: null
      },
      thirdBuyList: [], //第三方系统单据类型,
      thridBusFilter: [],
      thirdSysDetailList: [],
      selectInterfaceList: [],
      currentRow: null
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        thirdId: "",
        thirdName: "",
        enabled: null,
        page: 1,
        limit: 20,
      };
      this.getList();
    },
    closeDialog(val) {
      this.bussinessTypeFormVisible = false;
      this.editGeOrderParamVisible = false;
      if (val) {
        this.getBustyList(this.submitOrderRow);
      }
    },
    cancelDialog() {
      this.getList();
      this.modifyDialogVisible = false;
      this.modifyBusYypeDialogVisible = false;
    },
    //关闭接口编辑弹窗
    cancelInterfaceDialog() {
      this.modifyDetailDialogVisible = false;
      this.getDetailList();
    },
    handleCurrentChange(row) {
      if (row != null) {
        this.thirdSysFk = row.thirdId;
      }
      this.currentRow = row;
      this.getDetailList(row);
    },
    handleBustypeChange(row) {
      this.getBustyList(row);
      this.submitOrderRow = row;
      if (row.key === "orderSubmitUrl") {
        this.addBussinessTypeBtnVisible = true;
        this.submitOrderVisible = true;
        this.getOrdersEditBtnVisible = false;
      } else if (row.key === "orderQueryUrl") {
        this.addBussinessTypeBtnVisible = true;
        this.getOrdersEditBtnVisible = true;
        this.submitOrderVisible = false;
      } else {
        this.addBussinessTypeBtnVisible = false;
      }
      this.thirdSysFk = this.thirdSysFk;
    },
    search() {
      this.filterQuery.page = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getBasicThirdSys(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.detailList = [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    getDetailList() {
      let query = {
        thirdSysFk: this.thirdSysFk,
        enabled: true
      };
      this.loading = true;
      getDetailBasicThirdSys(query)
        .then((response) => {
          this.loading = false;
          this.detailList = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    getBustyList(row) {
      let query = {
        thirdSysFk: this.thirdSysFk,
        type: 0,
      };
      if (row.key == "orderQueryUrl") {
        query.type = 1;
      } else if (row.key == "orderSubmitUrl") {
        query.type = 2;
      } else {
        this.busTypeList = [];
        return;
      }
      this.busTypeLoading = true;
      filterBusTypeDetail(query)
        .then((response) => {
          this.busTypeLoading = false;
          this.busTypeList = response.data.list || [];
        })
        .catch(() => {
          this.busTypeLoading = false;
          this.busTypeList = [];
        });
    },
    onModifySubmit() {
      if (isBlank(this.inputQuery.thirdName)) {
        this.$message.warning("系统名称不能为空")
        return;
      }
      updateBasicThirdSys(this.inputQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.modifyDialogVisible = false;
            this.loading = false;
            this.getList();
            this.$message.success(response.data);
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.cancelDialog();
        });
    },
    onDetailModifySubmit() {
      if (this.inputDetailQuery.fromType === 3) {
        if (isBlank(this.inputDetailQuery.time)) {
          this.$message.error("接口请求时间不能为空");
          return;
        }
        if (this.inputDetailQuery.time < 0) {
          this.$message.error("接口请求时间不能小于0");
          return;
        }
      }

      updateDetailBasicThirdSys(this.inputDetailQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.loading = false;
            this.modifyDetailDialogVisible = false;
            this.handleCurrentChange();
            // this.getList();
            this.$message.success(response.data);
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.cancelDialog();
        });
    },
    handleModifyClick(row) {
      this.modifyDialogVisible = true;
      this.inputQuery = row;
    },
    handleDetailModifyClick(row) {
      this.modifyDetailDialogVisible = true;
      this.inputDetailQuery = row;
    },
    handleEdit(index, row) {
      this.currentCheckIndex = index;
      this.formName = "edit";
      this.getBussinessType();
      this.remoteMethod();
      this.bussinessTypeFormVisible = true;
      this.thirdBuyForm = {
        id: row.id,
        code: row.code,
        name: row.name,
        thirdBuyCode: row.thirdBuyCode,
        thirdBuyName: row.thirdBuyName,
        type: row.type,
        url: row.url,
        thirdSys: row.thirdSys,
        remark: row.remark
      };
    },
    handleSave(index, row) {
      this.currentCheckIndex = -1;
      saveBusTypeDetail(row).then((res) => {
        if (res.code == 20000) {
          this.$message.success(res.data);
        }
      })
    },
    addBussinessType() {
      this.formName = "add";
      this.remoteMethod();
      if (this.submitOrderVisible) {
        this.bussinessTypeFormVisible = true;
        this.getBussinessType();
        this.thirdBuyForm = {
          id: null,
          code: null,
          name: null,
          thirdBuyCode: null,
          thirdBuyName: null,
          type: 2,
          url: null,
          thirdSys: this.thirdSysFk,
          remark: null
        };
      } else if (this.getOrdersEditBtnVisible) {
        this.editGeOrderParamVisible = true;
        this.thirdBuyForm = {
          id: null,
          code: null,
          name: null,
          type: 1,
          url: null,
          thirdSys: this.thirdSysFk,
          remark: null
        };
      }
    },
    getBussinessType() {
      filterForThirdSys().then((res) => {
        this.bussinessTypeList = res.data;
      })
    },

    handleDelete(index, row) {
      this.$confirm('是否确认删除业务单据类型？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {id: row.id};
        deleteThirdSysBusType(params).then((res) => {
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
          this.handleBustypeChange(this.submitOrderRow);
        }).catch((error) => {
          this.$message.error(error.message);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getThirdBuyType(keyword) {
      let query = {
        key: keyword,
        thirdSys: this.thirdSysFk
      }
      getOriginBusType(query).then((res) => {
        this.thirdBuyList = res.data.list;
      });
    },

    remoteMethod(keyword) {
      let query = {
        key: keyword,
        thirdSys: this.thirdSysFk
      }
      getOriginBusType(query).then((res) => {
        this.thridBusFilter = res.data.list;
      });
    },

    handleAddInterface(row) {
      this.addInterfaceVisible = true;
      if (this.thirdSysFk == null) {
        this.thirdSysFk = row.thirdId;
      }
      let query = {
        thirdSysFk: row.thirdId,
        enabled: false
      };
      getDetailBasicThirdSys(query)
        .then((response) => {
          this.thirdSysDetailList = response.data.list;
        })
        .catch(() => {
        });
    },
    selectedInterface(rows) {
      let _this = this;
      _this.selectInterfaceList = [];
      rows.forEach(row => {
        _this.selectInterfaceList.push(row.id);
      });
    },
    addInterfaceData() {
      let data = [];
      if (this.selectInterfaceList.length > 0) {
        this.addInterfaceVisible = false;
        this.selectInterfaceList.forEach(id => {
          let item = {
            id: id,
            enabled: true
          };
          data.push(item);
        })
      } else {
        this.$message.warning("请选择需要添加的接口");
      }
      updateInterfaceStatus(data).then((res) => {
        if (res.code === 20000) {
          this.selectInterfaceList = [];
          this.$message.success("添加成功");
          let query = {
            thirdSysFk: this.thirdSysFk,
            enabled: true
          };
          this.loading = true;
          getDetailBasicThirdSys(query)
            .then((response) => {
              this.loading = false;
              this.detailList = response.data.list || [];
              this.total = response.data.total || 0;
            })
            .catch(() => {
              this.loading = false;
              this.list = [];
              this.total = 0;
            });
        }
      }).catch((error) => {
        this.$message.error("添加失败");
      });
    },
    disableInterface(row) {
      this.$confirm('是否确认移除此接口?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = [{id: row.id, enabled: false}];
        updateInterfaceStatus(data).then((res) => {
          if (res.code === 20000) {
            this.$message.success("移除成功");
            let query = {
              thirdSysFk: this.thirdSysFk,
              enabled: true
            };
            this.loading = true;
            getDetailBasicThirdSys(query)
              .then((response) => {
                this.loading = false;
                this.detailList = response.data.list || [];
                this.total = response.data.total || 0;
              })
              .catch(() => {
                this.loading = false;
                this.list = [];
                this.total = 0;
              });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    editGeOrderParam(index, row) {
      this.formName = "edit";
      this.editGeOrderParamVisible = true;

      this.thirdBuyForm = {
        id: row.id,
        code: row.code,
        name: row.name,
        type: row.type,
        url: row.url,
        thirdSys: this.thirdSysFk,
        remark: row.remark
      };
    }
  },
  components: {
    modifyDialog, modifyDetailDialog, DialogEditBusUpload, DialogEditBusDown
  },
  mounted() {
  },
  created() {
    this.getList();
    this.getThirdBuyType();
  },
};
</script>
<style scoped>
</style>

