<template>
  <div class="eibs-tab">
    <c-col :span="24">
      <span style="float: left">
        <el-button type="primary" size="small" @click="ofcAdd" v-if="isShowInsBtn" ref="gffInsertBtn"
          :disabled="isDisabled">新增</el-button>
        <el-button type="primary" size="small" @click="ofcEdit" v-if="isShowUpdBtn" ref="gffUpdateBtn"
          :disabled="!isDisabled">修改</el-button>
      </span>
      <span style="float: right">
        <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoading" @click="onSearch()">查询
        </el-button>
      </span>
    </c-col>
    <br />
    <el-divider></el-divider>
    <span>人工数据:</span>
    <el-divider></el-divider>
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="通道状态">
          <c-select v-model="model.ctlcod" placeholder="" :code="getCodesByKey('gfxsta')" :disabled="true"></c-select>
        </el-form-item>
      </c-col>
    </c-col>
    <!--===== 右 =====-->
    <c-col :span="12" class="col-right">
      <c-col :span="24">
        <el-form-item label="用户">
          <c-input v-model="model.usr" placeholder="" :disabled="true"></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="生效日期">
          <el-date-picker type="date" v-model="model.begdat" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="true"></el-date-picker>
        </el-form-item>
      </c-col>
    </c-col>
    <!--===== 右 =====-->
    <c-col :span="12" class="col-right">
      <c-col :span="24">
        <el-form-item label="失效日期">
          <el-date-picker type="date" v-model="model.enddat" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="true"></el-date-picker>
        </el-form-item>
      </c-col>
    </c-col>
    <span>人工历史数据:</span>
    <el-divider></el-divider>
    <c-col :span="24">
      <c-paging-table :data="gffData" :columns="gffColumns" :pageNumber="model.pageNum" :pageSize="model.pageSize"
        :total="model.total" v-on:queryFunc="queryFunc" :border="true" ref="tablelist">
      </c-paging-table>
    </c-col>
    <br />
    <span>中台数据:</span>
    <el-divider></el-divider>
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="通道状态">
          <c-select v-model="model2.ctlcod" placeholder="" :code="getCodesByKey('gfxsta')" :disabled="true"></c-select>
        </el-form-item>
      </c-col>
    </c-col>
    <!--===== 右 =====-->
    <c-col :span="12" class="col-right">
      <c-col :span="24">
        <el-form-item label="用户">
          <c-input v-model="model2.usr" placeholder="" :disabled="true"></c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="生效日期">
          <el-date-picker type="date" v-model="model2.begdat" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="true"></el-date-picker>
        </el-form-item>
      </c-col>
    </c-col>
    <!--===== 右 =====-->
    <c-col :span="12" class="col-right">
      <c-col :span="24">
        <el-form-item label="失效日期">
          <el-date-picker type="date" v-model="model2.enddat" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="true"></el-date-picker>
        </el-form-item>
      </c-col>
    </c-col>
    <span>中台历史数据:</span>
    <el-divider></el-divider>
    <c-col :span="24">
      <c-paging-table :data="gffData2" :columns="gffColumns2" :pageNumber="model2.pageNum" :pageSize="model2.pageSize"
        :total="model2.total" v-on:queryFunc="queryFunc2" :border="true" ref="tablelist">
      </c-paging-table>
    </c-col>

    <el-dialog :title="dialogNam[ofctyp]" :visible.sync="dialogAdd" :modal-append-to-body="false">
      <el-form ref="form" :model="form" label-suffix="：" :rules="rules">
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="数据来源" :label-width="formLabelWidth">
              <c-select v-model="form.ctlflg" autocomplete="off" placeholder="" :code="getCodesByKey('ctlcod')"
                :disabled="true"></c-select>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="通道状态" :label-width="formLabelWidth">
              <c-select v-model="form.ctlcod" placeholder="" :code="getCodesByKey('gfxsta')"></c-select>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="生效日期" :label-width="formLabelWidth">
              <el-date-picker type="date" v-model="form.begdat" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="true"></el-date-picker>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="失效日期" :label-width="formLabelWidth">
              <el-date-picker type="date" v-model="form.enddat" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="true"></el-date-picker>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="用户" :label-width="formLabelWidth">
              <c-input v-model="form.usr" autocomplete="off" placeholder="" :disabled="true"></c-input>
            </el-form-item>
          </c-col>
        </c-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitAdd" v-if="ofctyp == 'add'">提 交</el-button>
        <el-button type="primary" @click="commitEdit" v-if="ofctyp == 'edit'">提 交</el-button>
        <el-button @click="dialogAdd = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    queryByU,
    queryByG,
    queryByPage,
    queryByPageTwice,
    add,
    edit
  } from "~/service/manage/gimgff.js";
  import {
    getUsr
  } from "~/service/manage/ofc.js";
  import Gimgfx, {
    Pattern
  } from "./Gimgfx.js";
  import Gimgff from "./Gimgff.js";
  import codes from "~/config/CodeTable";
  import commonFunctions from '~/mixin/commonFunctions.js';

  export default {
    props: ["data"],
    inject: ["root"],
    mixins: [commonFunctions],
    data() {
      return {
        rules: Pattern,
        model: new Gimgff().data,
        model2: new Gimgff().data,
        gffData: [],
        gffColumns: [{
            label: '数据来源',
            prop: 'ctlflg',
            width: 'auto'
          },
          {
            label: '通道状态',
            prop: 'ctlcod',
            width: 'auto'
          },
          {
            label: '生效日期',
            prop: 'begdat',
            width: 'auto'
          },
          {
            label: '失效日期',
            prop: 'enddat',
            width: 'auto'
          },
          {
            label: '用户',
            prop: 'usr',
            width: 'auto'
          },
        ],
        gffData2: [],
        gffColumns2: [{
            label: '数据来源',
            prop: 'ctlflg',
            width: 'auto'
          },
          {
            label: '通道状态',
            prop: 'ctlcod',
            width: 'auto'
          },
          {
            label: '生效日期',
            prop: 'begdat',
            width: 'auto'
          },
          {
            label: '失效日期',
            prop: 'enddat',
            width: 'auto'
          },
          {
            label: '用户',
            prop: 'usr',
            width: 'auto'
          },
        ],
        dialogNam: {
          'add': '渠道统一应急开关新增',
          'edit': '渠道统一应急开关编辑',
        },
        dialogAdd: false,
        isShowInsBtn: true,
        isShowUpdBtn: true,
        searchLoading: false,
        form: new Gimgfx().data,
        ofctyp: "",
        formLabelWidth: "100px",
      };
    },
    computed: {
      isDisabled() {
        return this.model.inr !== '' && this.model.inr !== null
      }
    },
    created() {
      // this.onSearch();
    },
    methods: {
      onSearch() {
        this.model.pageSize = PageSize;
        this.model.pageNum = 1;
        this.onGimgffSearch();
        this.onSearch2();
      },
      onSearch2() {
        this.model2.pageSize = PageSize;
        this.model2.pageNum = 1;
        this.onGimgffSearch2();
      },
      getCodesByKey(key) {
        return codes[key] || [];
      },
      onGimgffSearch() {
        const loading = this.loading();
        this.queryByIdU();
        queryByPage(this.model).then(res => {
          const list = res.data.list
          this.gffData = list
          this.model.pageNum = res.data.pageNumber
          this.model.pageSize = res.data.pageSize
          this.model.total = res.data.total
          loading.close()
        }).catch((err) => {
          loading.close()
          this.$notify.error("查询失败！");
        });
      },
      queryByIdU() {
        queryByU(this.model).then(res => {
          this.model = res.data;
        })
      },
      queryByIdG() {
        queryByG(this.model).then(res => {
          this.model2 = res.data;
        })
      },
      queryFunc(pageNumber, pageSize) {
        this.model.pageNum = pageNumber
        this.model.pageSize = pageSize
        this.onGimgffSearch()
      },
      onGimgffSearch2() {
        const loading = this.loading();
        this.searchLoading = true;
        this.queryByIdG();
        queryByPageTwice(this.model2).then(res => {
          const list = res.data.list
          this.gffData2 = list
          this.model2.pageNum = res.data.pageNumber
          this.model2.pageSize = res.data.pageSize
          this.model2.total = res.data.total
          this.searchLoading = false;
          loading.close()
        }).catch((err) => {
          this.searchLoading = false;
          loading.close()
          this.$notify.error("查询失败！");
        });
      },
      queryFunc2(pageNumber, pageSize) {
        this.model2.pageNum = pageNumber
        this.model2.pageSize = pageSize
        this.onGimgffSearch2()
      },
      ofcAdd() {
        this.ofctyp = "add";
        this.dialogAdd = true;
        this.form = new Gimgfx().data;
        getUsr({}).then(res => {
          if (res.respCode == SUCCESS) {
            this.form.usr = res.data;
          }
        })
      },
      ofcEdit() {
        queryByU(this.model)
          .then((res) => {
            this.form = res.data;
            this.ofctyp = "edit";
            this.dialogAdd = "true";
            getUsr({}).then(res => {
              if (res.respCode == SUCCESS) {
                this.form.usr = res.data;
              }
            })
          })
          .catch((err) => {
            this.$notify.error("数据查看失败");
          });
      },
      commitAdd() {
        this.$refs.form.validate((validated) => {
          if (validated) {
            add(this.form)
              .then((res) => {
                this.$notify.success("新增成功！");
                this.dialogAdd = false;
                this.onGimgffSearch();
              })
              .catch((err) => {
                this.$notify.error("新增失败！");
              });
          }
        })
      },
      commitEdit() {
        this.$refs.form.validate((validated) => {
          if (validated) {
            edit(this.form)
              .then((res) => {
                if (res.data) {
                  this.$notify.success("保存成功！");
                  this.dialogAdd = false;
                  this.onGimgffSearch();
                } else {
                  this.$notify.error("请修改通道类型再保存！");
                }

              })
              .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>