<!-- 业务管理 -->
<template>
  <div>
    <el-card class="flex-1">
      <template slot="header">
        <span>文件管理</span>
        <div class="pull-right">
          <el-button type="primary" @click="BusinessAdd" icon="el-icon-fa-plus" title="添加"></el-button>
        </div>
      </template>
      <el-form :model="searchForm" ref="searchForm">
        <el-col :lg='4' :sm='12'>
          <el-form-item label="文件标题" prop="filename">
            <el-input v-model="searchForm.filename" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
    <el-card class="flex-1">
      <template slot="header">
        <span>文件列表</span>
        <div class="pull-right">
          <el-button type="primary" icon="el-icon-fa-search" @click="queryData" title="查询"></el-button>
          <el-button type="primary" @click="resetQuery" icon="el-icon-fa-reply-all" title="重置"></el-button>
        </div>
      </template>
      <PageTable hideTitle ref="dataTable" :auto-load="false" :page-size="10" @load-data="dataTableLoad" :data="data" highlight-current-row stripe border>
        
        <el-table-column prop="filename" label="文件标题" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" fixed='right' width="100">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-fa-edit" @click="shownote(scope.row)" title="编辑"></el-button>
            <el-button type="primary" icon="el-icon-fa-trash" @click="delbusInfo(scope.row)" title="删除"></el-button>
            <el-button type="primary" icon="el-icon-more" @click="showBus(scope.row)" title="文件详情"></el-button>
          </template>
        </el-table-column>
      </PageTable>
    </el-card>

    <el-dialog append-to-body v-draggable width="30%" title="文件详情" :visible.sync="noteDia.visible">
      <el-input type="textarea" :rows="28" v-model="noteDia.currData" class='filecount' disabled></el-input>
    </el-dialog>

    <el-dialog append-to-body v-draggable :visible.sync="Businessdata.visible" title="文件数据编辑" width='30%'>
      <div class="dialog-button">
        <el-button type="primary" :loading="Businessdata.saving" @click="submitParam" icon="el-icon-fa-save" title="提交"></el-button>
        <el-button type="primary" @click="BusinessAdd" icon="el-icon-fa-reply-all" title="重置"></el-button>
      </div>
      <el-form v-loading="Businessdata.loading" label-position="top" ref="businessForm" :model="Businessdata" :rules="rules">
        <el-form-item label="文件名称" prop="newfilename">
          <el-input v-model="Businessdata.newfilename"></el-input>
        </el-form-item>
        <el-form-item label="文件内容" prop="filecount">
          <el-input class='filecount' type="textarea" :rows="28" placeholder="请输入内容" v-model="Businessdata.filecount"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
import Api from "@/api/base/sysm/Business";

export default {
  name: "Business",
  data() {
    var checkName = (rule, value, callback) => {
      if (value.substring(value.length - 5) != ".json") {
        callback(new Error("请以.json结尾"));
      } else {
        callback();
      }
    };
    var checkcount = (rule, value, callback) => {
      if (typeof value == "string") {
        try {
          JSON.parse(value);
          callback();
        } catch (e) {
          callback(new Error("不符合json格式"));
        }
      }
    };
    return {
      noteDia: {
        visible: false,
        saving: false,
        currData: {}
      },
      Businessdata: {
        visible: false,
        saving: false,
        loading: false,
        filename: "",
        filecount: "",
        newfilename: ""
      },
      // 查询表单用到的数据
      searchForm: {
        filename: ""
      },
      data: [],
      rules: {
        newfilename: {
          validator: checkName,
          trigger: "blur"
        },
        filecount: {
          validator: checkcount,
          trigger: "blur"
        }
      },
      //删除用
      loading: false
    };
  },
  methods: {
    // 重置查询
    resetQuery() {
      this.$refs.searchForm.resetFields();
    },
    // 查询数据
    queryData() {
      this.$refs.dataTable.load(this.searchForm);
    },
    // 加载表格数据
    dataTableLoad(params, resolve) {
      Api.queryBusinessInfo(params)
        .then(resolve) // 让表格解析你提供的数据 (主要解析页码等)
        .then(respData => (this.data = respData.datarows)); // 本地也记录一下数据 (提供给表示显示的数据)
    },
    // [ 编辑 ]
    shownote(row) {
      this.Businessdata.loading = true;
      Api.getBusiness(row.filename).then(respData => {
        this.Businessdata.filecount = respData.filecount;
        this.Businessdata.filename = row.filename;
        this.Businessdata.newfilename = row.filename;
        this.Businessdata.loading = false;
        this.Businessdata.visible = true;
      });
    },
    // [ 查看 ]
    showBus(row) {
      Api.getBusiness(row.filename).then(respData => {
        this.noteDia.currData = respData.filecount;
        this.noteDia.visible = true;
      });
    },
    // [ 删除 ]
    delbusInfo(data) {
      this.$confirm("是否删除此业务?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        Api.delBusinessInfo(data.filename)
          .then(() => {
            this.queryData();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    // 响应[添加按钮]
    BusinessAdd() {
      this.$nextTick(() => {
        this.$refs.businessForm.resetFields();
      });
      this.Businessdata.newfilename = "";
      this.Businessdata.loading = true;
      Api.getBusinessinfo("Bussinessinfo.json").then(respData => {
        this.Businessdata.filecount = respData.filecount;
        this.Businessdata.loading = false;
        this.Businessdata.visible = true;
      });
      this.show = true;
    },
    // [ 提交 ]
    submitParam() {
      this.$refs.businessForm.validate(valid => {
        if (valid) {
          this.Businessdata.saving = true;
          Api.saveBusInfo(this.Businessdata)
            .then(() => {
              this.queryData();
              this.Businessdata.saving = false;
              this.Businessdata.visible = false;
            })
            .catch(error => {
              this.Businessdata.saving = false;
              this.Businessdata.error = error.validError;
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style>
.filename {
  padding-left: 15px;
}
.filecount .ql-editor {
  min-height: 400px;
}
.filecount {
  min-height: 500px;
}
</style>


