<template>
  <div class="eibs-tab">
    <c-col :span="24" class="col-right">
      <c-col :span="12">
        <el-form-item label="交易编码" prop="bop">
          <c-select v-model="model.bop" placeholder="请选择交易编码" dbCode="BOPCOD" isShowKeyAndLabel sort="SRT"
            @change="changeDirAndTyp()" clearable></c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="码值" prop="cod">
          <c-input v-model="model.cod" placeholder="请输入码值" />
        </el-form-item>
      </c-col>
    </c-col>
    <c-col :span="24" class="col-right">
      <c-col :span="12">
        <el-form-item label="方向(类型)" prop="dir">
          <c-select v-model="model.dir" placeholder="请选择方向(类型)" :disabled="formFieldDisabled" clearable>
            <el-option v-for="item in dirList[model.bop]" :key="item.label" :label="item.value +' - '+ item.label"
              :value="item.value" />
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="名称" prop="txt">
          <c-input v-model="model.txt" placeholder="请输入名称" />
        </el-form-item>
      </c-col>
    </c-col>
    <c-col :span="24" class="col-right">
      <c-col :span="12">
        <el-form-item label="性质" prop="typ">
          <c-select v-model="model.typ" placeholder="请选择性质" :disabled="formFieldDisabled" clearable>
            <el-option v-for="item in typList[model.bop]" :key="item.label" :label="item.value +' - '+ item.label"
              :value="item.value" />
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="状态" prop="sta">
          <c-select v-model="model.sta" placeholder="请选择状态" dbCode="CODSTA" sort="SRT" isShowKeyAndLabel>
          </c-select>
        </el-form-item>
      </c-col>
    </c-col>
    <c-col :span="24">
      <span style="float: left">
        <el-button type="primary" size="small" ref="codInsertBtn" v-if="showInsertBtn" @click="bopcodadd()">新增
        </el-button>
      </span>
      <span style="float: right">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoading" @click="onSearch()">查询
        </el-button>
      </span>
    </c-col>
    <c-col :span="24">
      <c-paging-table :data="codData" :columns="codColumns" :pageNumber="model.pageNum" :pageSize="model.pageSize"
        :total="model.total" v-on:queryFunc="queryFunc" :border="true">
        <c-table-column fixed="right" prop="op" label="操作" width="240px">
          <template slot-scope="{ scope }">
            <c-button style="margin-left: 5px" size="small" type="info" @click="bopcodinfo(scope.row)">详情</c-button>
            <c-button style="margin-left: 5px" size="small" type="primary" v-if="showUpdateBtn" ref="codUpdateBtn"
              @click="bopcodedit(scope.row)" :disabled="scope.row.sta[0]=='D'">修改</c-button>
            <c-button size="small" style="margin-left: 5px" v-if="showDeleteBtn" ref="codDeleteBtn" type="danger"
              @click="codDelete(scope.row.inr)" :disabled="scope.row.sta[0]=='D'">删除</c-button>
          </template>
        </c-table-column>
      </c-paging-table>
    </c-col>
    <el-dialog :title="dialogNam[codType]" :visible.sync="dialog" :modal-append-to-body="false" center>
      <el-form ref="form" :model="form" label-suffix="：" :rules="rules" :disabled="isDisabled">
        <c-col :span="24" style="padding-right: 20px;">
          <c-col :span="24">
            <el-form-item label="交易编码" :label-width="formLabelWidth" prop="bop">
              <c-select v-model="form.bop" placeholder="请选择交易编码" dbCode="BOPCOD" sort="SRT" isShowKeyAndLabel
                @change="changeDialogDirAndTyp()" clearable :disabled="codType == 'edit'"></c-select>
            </el-form-item>
          </c-col>
          <c-col :span="24">
            <c-col :span="12">
              <el-form-item label="方向(类型)" :label-width="formLabelWidth" prop="dir">
                <c-select v-model="form.dir" placeholder="请选择方向(类型)" :disabled="dialogFieldDisabled"
                  v-if="codType == 'add'">
                  <el-option v-for="item in dirList[form.bop]" :key="item.label" :label="item.value +' - '+ item.label"
                    :value="item.value" />
                </c-select>
                <c-select v-model="form.dir" placeholder="请选择方向(类型)"
                  v-if="(codType == 'edit' || codType == 'info') && form.bop == 'I'" dbCode="CODDIR"
                  :filterKey="['I','O']" isShowKeyAndLabel>
                </c-select>
                <c-select v-model="form.dir" placeholder="请选择方向(类型)" disabled="true"
                  v-if="(codType == 'edit'  || codType == 'info') && form.bop != 'I'" dbCode="CODDIR" isShowKeyAndLabel>
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="12">
              <el-form-item label="性质" :label-width="formLabelWidth" prop="typ">
                <c-select v-model="form.typ" placeholder="请选择性质" :disabled="dialogFieldDisabled"
                  v-if="codType == 'add'">
                  <el-option v-for="item in typList[form.bop]" :key="item.label" :label="item.value +' - '+ item.label"
                    :value="item.value" />
                </c-select>
                <c-select v-model="form.typ" placeholder="请选择性质" dbCode="CODTYP" :filterKey="['T','N','C']"
                  v-if="(codType == 'edit'  || codType == 'info') && form.bop == 'I'" isShowKeyAndLabel>
                </c-select>
                <c-select v-model="form.typ" placeholder="请选择性质" dbCode="CODTYP"
                  v-if="(codType == 'edit'  || codType == 'info') && form.bop != 'I'" disabled="true" isShowKeyAndLabel>
                </c-select>
              </el-form-item>
            </c-col>
          </c-col>
          <c-col :span="24">
            <c-col :span="12">
              <el-form-item label="码值" :label-width="formLabelWidth" prop="cod">
                <c-input v-model="form.cod" autocomplete="off" placeholder="请输入名称" :disabled="codType == 'edit'" />
              </el-form-item>
            </c-col>
            <c-col :span="12">
              <el-form-item label="名称" :label-width="formLabelWidth" prop="txt">
                <c-input v-model="form.txt" autocomplete="off" placeholder="请输入名称" />
              </el-form-item>
            </c-col>
          </c-col>
        </c-col>
      </el-form>
      <div slot="footer" class="model-footer">
        <c-button type="primary" @click="codAdd" v-if="codType == 'add'">确 定</c-button>
        <c-button type="primary" @click="codEdit" v-if="codType == 'edit'" :disabled="form.sta == 'D'">确 定</c-button>
        <c-button @click="dialog= false" v-if="codType != 'info'">取 消</c-button>
        <c-button @click="dialog= false" v-if="codType == 'info'">返 回</c-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Utils from "~/utils";
  import codes from "~/config/CodeTable";
  import {
    queryByPage,
    queryById,
    add,
    edit,
    deleteById,
    check
  } from "~/service/manage/cod.js";
  import Cod, {
    Pattern
  } from "./Cod.js";
  import commonFunctions from "~/mixin/commonFunctions.js";
  export default {
    mixins: [commonFunctions],
    name: "",
    props: ["model"],
    inject: ["root"],
    data() {
      return {
        dirList: {
          'I': [{
              label: '收入',
              value: 'I'
            },
            {
              label: '支出',
              value: 'O'
            }
          ],
          'F': [{
            label: '经济类型',
            value: 'F'
          }],
          'Z': [{
            label: '行政区码',
            value: 'Z'
          }],
          'W': [{
            label: '行业属性',
            value: 'W'
          }]
        },
        typList: {
          'I': [{
              label: '贸易',
              value: 'T'
            },
            {
              label: '非贸易',
              value: 'N'
            },
            {
              label: '资本',
              value: 'C'
            }
          ],
          'F': [{
            label: '经济类型',
            value: 'F'
          }],
          'Z': [{
            label: '行政区码',
            value: 'Z'
          }],
          'W': [{
            label: '行业属性',
            value: 'W'
          }]
        },
        rules: Pattern,
        codData: [],
        codColumns: [{
            label: '交易编码',
            prop: 'bopnam',
            width: 'auto'
          },
          {
            label: '码值',
            prop: 'cod',
            width: 'auto'
          },
          {
            label: '名称',
            prop: 'txt',
            width: 'auto'
          },
          {
            label: '方向(类型)',
            prop: 'dir',
            width: 'auto'
          },
          {
            label: '性质',
            prop: 'typ',
            width: 'auto'
          },
          {
            label: '状态',
            prop: 'sta',
            width: 'auto'
          }
        ],
        dialogNam: {
          'add': '收支申报码表新增',
          'edit': '收支申报码表修改',
          'info': '收支申报码表查看',
        },
        showInsertBtn: false,
        showUpdateBtn: false,
        showDeleteBtn: false,
        searchLoading: false,
        isDisabled: false,
        dialog: false,
        form: new Cod().data,
        codType: "",
        formLabelWidth: "100px",
        formFieldDisabled: true,
        dialogFieldDisabled: true,
      };
    },
    computed: {},
    created() {
      this.onDblcodSearch()
    },
    activated() {
      const {
        update
      } = this.$route.params
      if (update) {
        this.onDblcodSearch()
      }
    },
    mounted() {
      this.getHiddenButtonVue();
    },
    methods: {
      getHiddenButtonVue() {
        const loading = this.loading();
        this.$buttonControlService.hiddenBtnList()
          .then((res) => {
            // 【新增】按钮
            let hasInsert = res.some((item) => {
              return item.ITEMID === 'codInsertBtn';
            })
            if (hasInsert) {
              this.showInsertBtn = false;
            } else {
              this.showInsertBtn = true;
            }
            // 【修改】按钮
            let hasUpdate = res.some((item) => {
              return item.ITEMID === 'codUpdateBtn';
            })
            if (hasUpdate) {
              this.showUpdateBtn = false;
            } else {
              this.showUpdateBtn = true;
            }
            // 【删除】按钮
            let hasDelete = res.some((item) => {
              return item.ITEMID === 'codDeleteBtn';
            })
            if (hasDelete) {
              this.showDeleteBtn = false;
            } else {
              this.showDeleteBtn = true;
            }
            loading.close();
          })
      },
      changeDirAndTyp() {
        if (this.model.bop == '' || this.model.bop == 'F' || this.model.bop == 'Z' || this.model.bop == 'W') {
          this.formFieldDisabled = true;
          this.model.dir = this.model.bop;
          this.model.typ = this.model.bop;
        } else {
          this.formFieldDisabled = false;
          this.model.dir = '';
          this.model.typ = '';
        }
      },
      changeDialogDirAndTyp() {
        if (this.form.bop == '' || this.form.bop == 'F' || this.form.bop == 'Z' || this.form.bop == 'W') {
          this.dialogFieldDisabled = true;
          this.form.dir = this.form.bop;
          this.form.typ = this.form.bop;
        } else {
          this.dialogFieldDisabled = false;
          this.form.dir = '';
          this.form.typ = '';
        }
      },
      onChangeToNull() {
        this.model.typ = "";
      },
      changetyp() {
        this.form.typ = "";
      },
      handleReset() {
        this.formFieldDisabled = true;
        this.root.$refs.modelForm.resetFields();
      },
      onSearch() {
        this.model.pageNum = 1;
        this.model.pageSize = PageSize;
        this.onDblcodSearch();

      },
      onDblcodSearch() {
        this.searchLoading = true;
        queryByPage(this.model).then(res => {
          if (res.respCode == SUCCESS) {
            const list = res.data.list
            this.codData = list
            this.model.pageNum = res.data.pageNumber
            this.model.pageSize = res.data.pageSize
            this.model.total = res.data.total
            this.searchLoading = false;
          } else {
            this.searchLoading = false;
            this.$notify.error("查询失败");
          }
        })
      },
      queryFunc(pageNumber, pageSize) {
        this.model.pageNum = pageNumber
        this.model.pageSize = pageSize
        this.onDblcodSearch()
      },
      getCodesByKey(key) {
        return codes[key] || [];
      },
      codAdd() {
        this.$refs.form.validate((validated) => {
          if (validated) {
            check(this.form)
              .then((res) => {
                if (!res.data) {
                  add(this.form)
                    .then((res) => {
                      this.$notify.success("码表配置保存成功！");
                      this.dialog = false;
                      this.onSearch();
                    })
                    .catch((err) => {
                      this.$notify.error("码表配置保存失败！");
                    });
                } else {
                  return this.$notify.error("码表已存在！")
                }
              })
          }
        })
      },
      codInfo(index, row) {
        this.$router.push(`/business/dbicod/${row.inr}`)
      },
      codEdit() {
        this.$refs.form.validate((validated) => {
          if (validated) {
            edit(this.form)
              .then((res) => {
                this.$notify.success("修改成功！");
                this.dialog = false;
                this.onDblcodSearch();
              })
              .catch((err) => {
                this.$notify.error("修改失败！");
              });
          }
        })
      },
      codDelete(inr) {
        this.$confirm("是否确认删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            let params = {
              inr
            }
            deleteById(params)
              .then((res) => {
                this.$notify.success("码表信息删除成功！");
                this.onDblcodSearch()
              })
              .catch((err) => {
                this.$notify.error("码表信息删除失败！");
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      bopcodadd() {
        this.isDisabled = false;
        this.codType = "add";
        this.dialogFieldDisabled = true;
        this.dialog = true;
        this.form = new Cod().data;
      },
      bopcodedit(row) {
        this.isDisabled = false;
        queryById(row)
          .then((res) => {
            this.form = res.data;
            this.codType = "edit";
            this.dialog = true;
          })
          .catch((err) => {
            this.$notify.error("数据查看失败");
          });
      },
      bopcodinfo(row) {
        this.isDisabled = true;
        queryById(row)
          .then((res) => {
            this.form = res.data;
            this.codType = "info";
            this.dialog = true;
          })
          .catch((err) => {
            this.$notify.error("数据查看失败");
          });
      },
    },
  };
</script>

<style scoped>
  .table-button-item-list {
    padding: 0;
    margin: 0;
  }

  .table-button-item-list li {
    list-style: none;
    padding: 5px 0;
    text-align: center;
    color: #606266;
    cursor: pointer;
  }
</style>