<template>
  <div class="multEntryManage">
    <div class="box">
      <div class="box-top searchArea">
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="80px"
          :inline="true"
        >
          <el-form-item label="应用名称">
            <el-input
              placeholder="请输入应用名称"
              v-model="searchForm.appName"
              size="small"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-button size="mini" type="primary" @click="getEntryListData"
              >查询</el-button -->
            <el-button size="mini" type="primary" @click="getEntryListData" v-privilege="activeMenu + 'QUERY'"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-button
        class="button add-button"
        type="primary"
        size="mini"
        icon="el-icon-plus"
        @click="addBut()"
        v-privilege="activeMenu + 'ADD'"
        >新增</el-button
      >
      <div class="box-bottom">
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          style="width: 100%"
          height="100%"
          border
          size="mini"
          highlight-current-row
          align="center"
        >
          <el-table-column
            prop="appCode"
            label="应用编码"
            min-width="180px"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="appName"
            label="应用名称"
            min-width="180px"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="150px"
            :show-overflow-tooltip="true"
            :formatter="statusChange"
          >
          </el-table-column>
          <el-table-column
            prop="crtDate"
            label="创建时间"
            min-width="180px"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="crtOrgCode"
            label="创建机构"
            min-width="180px"
            :show-overflow-tooltip="true"
            :formatter="orgCrtChange"
          >
          </el-table-column>
          <el-table-column
            prop="crtUserCode"
            label="创建人"
            min-width="180px"
            :show-overflow-tooltip="true"
            :formatter="crtUserChange"
          >
          </el-table-column>
          <el-table-column
            prop="updDate"
            label="修改日期"
            width="150px"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="updOrgCode"
            label="修改机构"
            width="150px"
            :show-overflow-tooltip="true"
            :formatter="orgUpChange"
          >
          </el-table-column>
          <el-table-column
            prop="updUserCode"
            label="修改人"
            width="150px"
            :show-overflow-tooltip="true"
            :formatter="upUserChange"
          >
          </el-table-column>
          <el-table-column
            prop="appDesc"
            label="应用描述"
            width="150px"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="200px"
            :show-overflow-tooltip="true"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <div>
                <el-button
                  type="danger"
                  size="mini"
                  @click="dataDel(scope.row)"
                  icon="el-icon-delete"
                  v-privilege="activeMenu + 'DELETE'"
                  >删除</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="editBur(scope.row)"
                  icon="el-icon-share"
                  v-privilege="activeMenu + 'PUT'"
                  >编辑</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
        center
        :close-on-click-modal="false"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="应用编码:" prop="appCode">
            <el-input
              placeholder="请输入应用编码"
              v-model="ruleForm.appCode"
              size="small"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="应用名称:" prop="appName">
            <el-input
              placeholder="请输入应用名称"
              v-model="ruleForm.appName"
              size="small"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            <el-select
              v-model="ruleForm.status"
              placeholder="请选择状态"
              size="medium"
            >
              <el-option
                v-for="(item, index) in entryManageStatusArr"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应用描述:" prop="appDesc">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入应用描述"
              v-model="ruleForm.appDesc"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { checkCode } from "@/utils/validator.js";
import store from "@/store/index.js";
export default {
  name: "multEntryManage",
  data() {
    return {
      tableLoading: false,
      entryManageId: "",
      producttype: "",
      total: 0,
      tableData: [],
      searchForm: {
        appName: "",
      },
      store,
      entryManageStatusArr: [
        {
          name: "启用",
          value: "1",
        },
        {
          name: "停用",
          value: "0",
        },
      ],
      ruleForm: {
        appCode: "",
        appName: "",
        status: "",
        appDesc: ""
      },
      rules: {
        appCode: [
          { required: true, message: "请输入应用编码", trigger: "blur" },
        ],
        appName: [
          { required: true, message: "请输入应用名称", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      dialogVisible: false,
      dialogTitle: "", //保存弹窗标题
      operateType: false, //默认为新增
      entryManageId: "",
      orgTree: {
        tree: null,
      },
      companyId: "",
      orgNameData: {},
      userNameData: {},
    };
  },
  created() {
    this.activeMenu = window.top.localStorage.getItem("activeMenu");
    this.companyId = window.top.localStorage.getItem("companyId");
    Promise.all([this.getUser(), this.getOrg()]).then((res) => {
      this.getEntryListData();
    });
  },
  methods: {
    getOrg() {
      //  查询机构树
      return this.store
        .dispatch("system/organizManage/tree", this.companyId)
        .then((res) => {
          if (res.code === "0") {
            this.orgTree.tree = res.data;
            this.getOrgName(this.orgTree.tree);
          } else {
            this.$message.error(res.message);
          }
        });
    },
    getOrgName(list) {
      var name = "";
      for (let i = 0; i < list.length; i++) {
        try {
          if (list[i].orgCode) {
            name = list[i].orgName;
            this.orgNameData[list[i].orgCode] = name;
          }
          if (list[i].children && list[i].children.length >= 1) {
            this.getOrgName(list[i].children);
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.operateType
            ? this.updateProductData()
            : this.createProductData();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getEntryListData() {
      this.tableLoading = true;
      this.searchForm.companyId = this.companyId;
      return this.axios
        .get("pass/v1/sysappclients/like/", { params: this.searchForm })
        .then((response) => {
          let res = response.data;
          if (response.succeed) {
            this.tableData = res.list;
          } else {
            this.$message.error(response.message);
          }
          this.tableLoading = false;
        })
        .catch((err) => {
          // this.tableLoading = false;
          // this.$message.error(err.message);
          console.log(err);
        });
    },
    createProductData() {
      this.tableLoading = true;
      this.ruleForm = Object.assign(this.ruleForm, {
        companyId: this.companyId,
      });
      this.axios
        .post("pass/v1/sysappclients/", this.ruleForm)
        .then((res) => {
          if (res.succeed) {
            this.getEntryListData();
          } else {
            this.$message.error(res.data.status);
          }
          this.tableLoading = false;
          this.dialogVisible = false;
        })
        .catch((err) => {
          this.tableLoading = false;
          this.$message.error(err.message);
        });
    },
    updateProductData() {
      let that = this;
      this.tableLoading = true;
      this.ruleForm = Object.assign(this.ruleForm, {
        companyId: this.companyId,
      });
      this.axios
        .put("pass/v1/sysappclients/" + this.entryManageId, this.ruleForm)
        .then((res) => {
          if (res.succeed) {
            this.getEntryListData();
            that.$message.success("成功修改");
          } else {
            that.$message.error(res.message);
          }
          this.tableLoading = false;
          this.dialogVisible = false;
        })
        .catch((err) => {
          this.tableLoading = false;
          that.$message.error(err.message);
        });
    },
    // 改变表格显示条数
    // tableSizeChange(val) {
    //   let that = this;
    //   that.pageSize = val;
    //   this.getEntryListData();
    // },
    /**
     * @description {添加列表数据}
     */
    addBut() {
      let that = this;
      this.dialogTitle = "添加多端入录数据";
      this.operateType = false;
      this.ruleForm = {
        appCode: "",
        appName: "",
        status: "",
        appDesc: ""
      };
      that.dialogVisible = true;
    },
    /**
     * @description {编辑列表数据}
     */
    editBur(row) {
      let that = this;
      this.dialogTitle = "多端入录数据" + row.appName + "编辑";
      that.dialogVisible = true;
      this.operateType = true;
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.entryManageId = row.id;
    },
    editProduct() {},
    /**
     * @description {删除列表数据接口}
     */
    dataDel(row) {
      // console.log(row,'row+++0');
      // console.log(this.$store.state,'this.store+++1');
      let currentOption = []
      this.store
        .dispatch("system/functionMain/menuTree", {
          companyId: window.top.localStorage.getItem("companyId"),
          appId: row.appId,
        })
        .then((res)=>{
          // console.log(res.data,res.data.length);
          currentOption = res.data
        })

      let that = this;
      that
        .$confirm('是否删除项目"' + row.appName + '"?', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          state: "warning",
        })
        .then(() => {
          if(currentOption && currentOption.length === 0){
          this.axios.delete("pass/v1/sysappclients/" + row.id).then((res) => {
            if (res.succeed) {
              that.$message.success("成功删除");
              this.getEntryListData();
            } else {
              that.$message.error(res.message);
            }
          });}
          else {
            that.$message.error('删除失败，该应用下含有子菜单，无法删除！');
          }
        })
        .catch((error) => {
          if (error === "cancel") {
            console.log(error);
          } else {
            that.$message.error(error.message);
          }
        });
    },
    statusChange(row, col) {
      return row.status === "0" ? "停用" : "启用";
    },
    orgUpChange(row, col) {
      return !row.updOrgCode ? "" : this.orgNameData[row.updOrgCode];
    },
    orgCrtChange(row, col) {
      return !row.crtOrgCode ? "" : this.orgNameData[row.crtOrgCode];
    },
    crtUserChange(row, col) {
      return !row.crtUserCode ? "" : this.userNameData[row.crtUserCode];
    },
    upUserChange(row, col) {
      return !row.updUserCode ? "" : this.userNameData[row.updUserCode];
    },
    getUser() {
      return this.store
        .dispatch("system/usersManage/list", {
          companyId: this.companyId,
          pageSize: 10000000,
        })
        .then((res) => {
          if (res.code === "0") {
            for (let j = 0, len = res.data.list.length; j < len; j++) {
              let item = res.data.list[j];
              this.userNameData;
              if (item.userCode && !this.userNameData[item.userCode]) {
                this.userNameData[item.userCode] = item.userName;
              }
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败");
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.multEntryManage {
  padding: 15px;
  height: 100%;
  position: relative;
  .box {
    position: relative;
    height: calc(100% - 41px);
    // padding-top: 45px;
    .add-button {
      position: absolute;
      top: 0;
      right: 0;
    }
    .box-bottom {
      height: 100%;
      padding-bottom: 60px;
    }
  }
  .red {
    color: red;
  }
  .chartreuse {
    color: #1a9f17;
  }
  .el-table {
    .el-form-item {
      margin-top: 15px;
    }
  }
  /deep/.el-dialog--center .el-dialog__body {
    height: 200px;
    overflow-y: auto;
  }
}
</style>
