<template>
  <div class="business pagePadding">
    <div
      v-if=" powers.some((i) => i == '001')"
    >
      <el-row style="padding: 5px 0 0 0" v-if="titleList.length > 0">
        <div class="my-breadcrumb clear">
          <div
            class="my-breadcrumb-item"
            v-for="(item, index) in titleList"
            :key="item + index"
            @click="changeBreadcrumb(index)"
          >
            <span class="label">{{ item.name }}</span
            ><span class="separator" v-if="index + 1 !== titleList.length"
              >/</span
            >
          </div>
          <el-button
            :size="searchSize"
            type="primary"
            style="float: right; margin: 4px 0 0 10px"
            @click="searchList"
          >
            刷新
          </el-button>
          <el-button
            type="warning"
            class="fr"
            style="margin: 4px 0 0 10px"
            :size="searchSize"
            @click="restSearch"
          >
            重置
          </el-button>
        </div>
      </el-row>
      <el-row style="padding: 7px 0 10px 0">
        <el-col :span="6" style="width: 303px">
          <period-date-picker
            :type="1"
            :width="'135px'"
            :size="searchSize"
            :start="parmValue.start"
            :end="parmValue.end"
            @timeReturned="handleTime"
          />
        </el-col>
        <el-col :span="3" style="width: 400px">
          <el-input
            v-model="sinput"
            :size="searchSize"
            clearable
            @blur="searchList()"
            placeholder="关键字"
            maxlength="40"
          >
            <el-select
              v-model="select"
              slot="prepend"
              style="width: 125px"
              placeholder="关键字类型"
            >
              <el-option label="组织/企业名称" value="1"></el-option>
              <el-option label="企业编号" value="2"></el-option>
              <el-option label="创建人" value="3"></el-option>
              <el-option label="创建人部门" value="4"></el-option>
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchList()"
            ></el-button
          ></el-input>
        </el-col>

        <el-col
          :span="3"
          class="fr"
          style="width: 66px; padding: 0 0 0 10px"
          v-if="powers.some((i) => i == '003')"
        >
          <el-button
            :size="searchSize"
            type="success"
            style="float: right"
            @click="openModal({ id: 'add' }, '003', '0')"
          >
            添加
          </el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableData"
        :size="size"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="100"> </el-table-column>
        <el-table-column label="类型" width="100">
          <template slot-scope="scope">
            <el-tag
              :size="tablebtnSize"
              :type="scope.row.kh == 0 ? 'success' : ''"
              v-text="
                (khOptions.find((item) => item.id == scope.row.kh) || {})
                  .label || '--'
              "
            ></el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="code" label="编码" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag
              :size="tablebtnSize"
              :type="scope.row.status === '0' ? 'warning' : ''"
              v-text="
                (
                  statusOptions.find((item) => item.id == scope.row.status) ||
                  {}
                ).label || '--'
              "
            ></el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="company_name"
          label="创建人部门"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="creater"
          label="创建人"
          width="80"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="addtime"
          label="创建时间"
          width="145"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="170">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              v-if="powers.some((i) => i == '007')"
              content="查看信息"
              placement="top"
            >
              <i
                class="el-icon-view tb-icon"
                @click="openModal(scope.row, '007', scope.row.kh)"
              ></i>
            </el-tooltip>
            <el-tooltip
              v-if="powers.some((i) => i == '005')"
              effect="dark"
              content="编辑信息"
              placement="top"
            >
              <i
                class="el-icon-edit tb-icon"
                @click="openModal(scope.row, '005', scope.row.kh)"
              ></i>
            </el-tooltip>
            <el-tooltip
              v-if="
                powers.some((i) => i == '004') && scope.row.status === '1'
              "
              effect="dark"
              content="禁用"
              placement="top"
            >
              <i
                class="el-icon-video-pause tb-icon"
                @click="
                  changeStatus(scope.row.id, scope.row.status, scope.row.kh)
                "
              ></i>
            </el-tooltip>
            <el-tooltip
              v-if="
                powers.some((i) => i == '004') && scope.row.status === '0'
              "
              effect="dark"
              content="启用"
              placement="top"
            >
              <i
                class="el-icon-video-play tb-icon"
                @click="
                  changeStatus(scope.row.id, scope.row.status, scope.row.kh)
                "
              ></i>
            </el-tooltip>
            <el-tooltip
              v-if="powers.some((i) => i == '006')"
              effect="dark"
              content="删除"
              placement="top"
            >
              <i
                class="el-icon-delete tb-icon"
                @click="deleteItem(scope.row.id, scope.row.kh)"
              ></i>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              v-if="scope.row.kh + '' === '0'"
              content="查询下一级"
              placement="top"
            >
              <i
                class="el-icon-caret-right tb-icon"
                @click="getNext(scope.$index)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <add-edit
        :showModel="showModel"
        :id="modelId"
        :organ="titleList"
        :kh="kh"
        :is-detail="isDetail"
        @refresh="searchList"
        @cancel="showModel = false"
      ></add-edit>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
   <script>
import resToken from "@/mixins/resToken";
import asyncRequest from "@/apis/service/serviceParam/business";
import addEdit from "./addEdit";
import { mapGetters } from "vuex";

export default {
  name: "business",
  mixins: [resToken],
  components: {
    addEdit,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "business"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      kh: "",
      select: "1",
      sinput: "",
      // 状态
      statusOptions: [
        { id: "0", label: "禁用" },
        { id: "1", label: "启用" },
      ],
      khOptions: [
        { id: 0, label: "组织" },
        { id: 1, label: "企业" },
      ],
      titleList: [],
      isDetail: false,
      modelId: "",
      loading: true,
      showModel: false,
      parmValue: {
        name: "",
        pid: "",
        creater: "",
        start: "",
        company_name: "", //创建人部门
        end: "",
        companyNo: "",
      },
      // 表格 - 数据
      tableData: [],
    };
  },
  mounted() {
    this.initTitleList();
    this.searchList();
  },
  methods: {
    openModal(row, type, kh) {
      const { status, id, code } = row;
      if (type === "005" && status === "1") {
        this.$message.warning("禁用后，才可以修改！");
        return;
      }
      this.modelId = kh + "" === "0" ? id : code;
      this.kh = kh;
      this.isDetail = type;
      this.showModel = true;
    },
    initTitleList() {
      this.titleList = [];
      let model = { id: "0", name: "全部一级组织" };
      this.titleList.push(model);
    },
    // 时间
    async handleTime(e) {
      this.parmValue.start = e.startTime || "";
      this.parmValue.end = e.endTime || "";
      if (
        (this.parmValue.start !== "" && this.parmValue.end !== "") ||
        (this.parmValue.start === "" && this.parmValue.end === "")
      ) {
        await this.searchList();
      }
    },
    async changeBreadcrumb(index) {
      if (index + 1 === this.titleList.length) {
        return;
      } else {
        this.parmValue.pid = this.titleList[index].id;
        this.titleList = this.titleList.slice(0, index + 1);
      }
      await this.searchList();
    },
    restSearch() {
      // this.titleList = [];
      this.parmValue = {
        name: "",
        pid: "",
        creater: "",
        company_name: "", //创建人部门
        start: "",
        end: "",
        companyNo: "",
      };
      this.select = "1";
      this.sinput = "";
      this.searchList();
    },
    getNext(index) {
      this.titleList.push(this.tableData[index]);
      this.parmValue.pid = this.tableData[index].id;
      this.parmValue.name = "";
      this.searchList();
    },
    /**
     * 启用/禁用
     * @param {String} id id
     * @param {String} status 0-禁用 1-启用
     * @param {String} tyep 0-组织 1-企业
     */
    async changeStatus(id, status, type) {
      await this.$confirm(`确定要改为${status === "1" ? "禁用" : "启用"}？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.loading = true;
          const model = {
            id: id,
            status: status === "1" ? "0" : "1",
          };
          let res = {};
          if (type + "" === "0") {
            res = await asyncRequest.zstatus(model);
          } else {
            res = await asyncRequest.qstatus(model);
          }
          if (res && res.code === 0) {
            this.loading = false;
            this.$notify.success({
              title: "状态修改成功！",
              message: "",
            });
            await this.searchList();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.loading = false;
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    async deleteItem(id, type) {
      await this.$confirm("确定要删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const model = {
            id: id,
          };
          let res = {};
          if (type + "" === "0") {
            res = await asyncRequest.zdelete(model);
          } else {
            res = await asyncRequest.qdelete(model);
          }
          if (res && res.code === 0) {
            this.$notify.success({
              title: "删除成功",
              message: "",
            });
            this.searchList();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    async searchList() {
      if (
        (this.parmValue.start !== "" && this.parmValue.end === "") ||
        (this.parmValue.start == "" && this.parmValue.end != "")
      ) {
        this.$message.warning("开始时间和结束时间不能为空");
        return;
      }
      this.loading = true;
      this.parmValue.name = this.select === "1" ? this.sinput : "";
      this.parmValue.companyNo = this.select === "2" ? this.sinput : "";
      this.parmValue.creater = this.select === "3" ? this.sinput : "";
      this.parmValue.company_name = this.select === "4" ? this.sinput : "";
      const res = await asyncRequest.list(this.parmValue);
      if (res && res.code === 0 && res.data) {
        this.tableData = res.data;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
      }
      this.loading = false;
    },
  },
};
</script>
  <style lang="scss" scoped>
.business {
  .my-breadcrumb {
    .my-breadcrumb-item {
      float: left;
      span {
        height: 32px;
        line-height: 32px;
      }
      .label {
        padding: 0 5px 0 0;
        color: 010101;
      }
      .separator {
        color: #787878;
        font-size: 13px;
        padding: 0 5px 0 0;
      }
      &:last-child {
        .label {
          color: #787878;
        }
      }
      &:hover {
        cursor: pointer;
      }
      &:last-child {
        cursor: default;
      }
      &:only-child {
        cursor: pointer;
      }
      // &.chover {
      //   cursor: pointer;
      // }
    }
  }
}
</style>
   