<template>
  <div class="business pagePadding">
    <div
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      <el-row :gutter="10">
        <el-col :span="24" style="padding: 0 0 18px 0">
          <el-col :span="3">
            <el-select
              v-model="parmValue.status"
              filterable
              clearable
              :size="searchSize"
              placeholder="账号状态"
              style="width: 100%"
            >
              <el-option
                v-for="item in statusList"
                :key="'status' + item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>

          <el-col :span="8">
            <ul class="el-list-select-input clearfix">
              <li>
                <el-select
                  v-model="select"
                  :size="searchSize"
                  placeholder="查询类型"
                >
                  <el-option label="客户姓名" value="1"></el-option>
                  <el-option label="公司名称" value="2"></el-option>
                  <el-option label="业务员姓名" value="3"></el-option>
                </el-select>
              </li>
              <li>
                <el-input
                  :size="searchSize"
                  v-model="input"
                  :maxlength="40"
                  placeholder="关键字"
                >
                  <el-button
                    slot="append"
                    @click="searchList"
                    icon="el-icon-search"
                  ></el-button>
                </el-input>
              </li>
            </ul>
          </el-col>
          <el-col :span="13" style="float: right">
            <el-button
              type="warning"
              v-if="powers.some((item) => item == '024')"
              :size="searchSize"
              @click="restSearch"
            >
              重置
            </el-button>
            <el-button
              type="primary"
              v-if="powers.some((item) => item == '002')"
              :size="searchSize"
              style="float: right; margin-left: 5px"
              @click="searchList"
            >
              刷新
            </el-button>
            <el-button
              v-if="powers.some((item) => item == '003')"
              :size="searchSize"
              type="success"
              style="float: right"
              @click="openModal('add', false, false, true)"
            >
              添加
            </el-button>
          </el-col>
        </el-col>
      </el-row>

      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        v-loading="loading"
        :size="size"
      >
        <el-table-column
          prop="company"
          label="企业名称"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="真实姓名"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="mobile"
          label="手机号"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          prop="admin_name"
          label="业务员"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column label="审核状态" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-tag
              :size="tablebtnSize"
              v-if="scope.row.ex_status === '0'"
              :class="{
                'hover-tag':
                  scope.row.status === '0' &&
                  powers.some((item) => item == '010'),
              }"
              :type="'warning'"
              @click="
                openModal(
                  scope.row.id,
                  false,
                  true,
                  scope.row.status === '0' &&
                    powers.some((item) => item == '010')
                )
              "
            >
              <i
                class="el-icon-thumb"
                v-if="
                  scope.row.status === '0' &&
                  powers.some((item) => item == '010')
                "
                style="margin-right: 1px"
              ></i>
              {{ scope.row.ex_status_cn }}
            </el-tag>
            <el-tag
              :size="tablebtnSize"
              v-else-if="scope.row.ex_status === '1'"
              :type="'success'"
            >
              {{ scope.row.ex_status_cn }}
            </el-tag>
            <el-tag
              :size="tablebtnSize"
              v-else-if="scope.row.ex_status === '2'"
              :class="{
                'hover-tag':
                  scope.row.status === '0' &&
                  powers.some((item) => item == '009'),
              }"
              :type="'danger'"
              @click="
                again(
                  scope.row.id,
                  scope.row.status === '0' &&
                    powers.some((item) => item == '009')
                )
              "
            >
              <i
                class="el-icon-thumb"
                v-if="
                  scope.row.status === '0' &&
                  powers.some((item) => item == '009')
                "
                style="margin-right: 1px"
              ></i>
              {{ scope.row.ex_status_cn }}
            </el-tag>
            <el-tag
              :size="tablebtnSize"
              v-else-if="scope.row.ex_status === '3'"
              :class="{
                'hover-tag':
                  scope.row.status === '0' &&
                  powers.some((item) => item == '009'),
              }"
              :type="'info'"
              @click="
                again(
                  scope.row.id,
                  scope.row.status === '0' &&
                    powers.some((item) => item == '009')
                )
              "
            >
              <i
                class="el-icon-thumb"
                v-if="
                  scope.row.status === '0' &&
                  powers.some((item) => item == '009')
                "
                style="margin-right: 1px"
              ></i>
              {{ scope.row.ex_status_cn }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === '1'"
              type="success"
              :class="{ 'hover-tag': powers.some((item) => item == '004') }"
              :size="tablebtnSize"
              @click="
                statusConfirm(
                  scope.row.id,
                  scope.row.status,
                  scope.row.ex_status,
                  powers.some((item) => item == '004')
                )
              "
            >
              <i
                class="el-icon-thumb"
                v-if="powers.some((item) => item == '004')"
                style="margin-right: 1px"
              ></i>
              启用</el-tag
            >
            <el-tag
              v-else
              :class="{ 'hover-tag': powers.some((item) => item == '004') }"
              :size="tablebtnSize"
              type="warning"
              @click="
                statusConfirm(
                  scope.row.id,
                  scope.row.status,
                  scope.row.ex_status,
                  powers.some((item) => item == '004')
                )
              "
            >
              <i
                class="el-icon-thumb"
                v-if="powers.some((item) => item == '004')"
                style="margin-right: 1px"
              ></i>
              禁用</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="addtime"
          label="创建时间"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-link
              v-if="
                (scope.row.status === '0' &&
                  scope.row.ex_status === '3' &&
                  powers.some((item) => item == '005')) ||
                (scope.row.status === '0' &&
                  scope.row.ex_status === '2' &&
                  powers.some((item) => item == '005'))
              "
              type="primary"
              style="margin: 0 4px"
              :underline="false"
              :size="tablebtnSize"
              @click="openModal(scope.row.id, false, false, true)"
            >
              修改
            </el-link>
            <!-- <el-link
          type="primary"
              style="margin: 0 4px"
              :underline="false"
              :size="tablebtnSize"
            @click="deleteById(scope.row.id)"
          >
            删除
          </el-link>  -->
            <el-link
              v-if="powers.some((item) => item == '007')"
              type="primary"
              style="margin: 0 4px"
              :underline="false"
              :size="tablebtnSize"
              @click="openModal(scope.row.id, true, false, true)"
            >
              详情
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="Pagination"
        style="text-align: right; margin-top: 10px"
        v-show="count > 0"
      >
        <el-pagination
          :size="searchSize"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="parmValue.page"
          :page-sizes="[10, 15, 20, 30, 40]"
          :page-size="parmValue.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <add-edit
        :showModel="showModel"
        :id="modelId"
        :isApproval="approval"
        :isDetail="isDetail"
        @refresh="searchList"
        @cancel="showModel = false"
      ></add-edit>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
   <script>
import mixinPage from "@/mixins/elPaginationHandle";
import asyncRequest from "@/apis/service/client/business";
import addEdit from "./addEdit";
import statusList from "@/assets/js/statusList";
import { mapGetters } from "vuex";
export default {
  name: "business",
  data() {
    return {
      statusList: statusList,
      approval: false,
      loading: true,
      showModel: false,
      isDetail: false,
      modelId: 0,
      select: "1",
      input: "",
      parmValue: {
        status: "",
        staff: "", //客户姓名
        name: "", // 公司名称
        admin: "", //业务员姓名
        type: "2",
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
      count: 0, // 总条数
      tableData: [],
    };
  },
  mixins: [mixinPage],
  mounted() {
    this.searchList();
  },
  components: {
    addEdit,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "business"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  methods: {
    restSearch() {
      this.input = "";
      this.select = "1";
      this.parmValue = {
        status: "",
        type: "2",
        staff: "", //客户姓名
        name: "", // 公司名称
        admin: "", //业务员姓名
        page: 1, // 页码
        size: 10, // 每页显示条数
      };
      this.searchList();
    },
    openModal(id, isDetail, approval, type) {
      if (!type) {
        return;
      }
      this.showModel = true;
      this.modelId = id;
      this.isDetail = isDetail;
      this.approval = approval;
    },
    async deleteById(id) {
      await this.$confirm("确定要删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await asyncRequest.delete({ id });
          if (res.code === 0) {
            this.$notify.success({
              title: "删除成功",
              message: "",
            });
            this.searchList();
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },

    async again(id, type) {
      if (!type) {
        return;
      }
      await this.$confirm("确定要提交审核？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await asyncRequest.again({ id: id });
          if (res.code === 0) {
            this.$notify.success({
              title: "提交成功",
              message: "",
            });
            this.searchList();
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    async searchList() {
      this.loading = true;
      if (this.select === "1") {
        this.parmValue.staff = this.input; //客户姓名
        this.parmValue.name = ""; // 公司名称
        this.parmValue.admin = ""; //业务员姓名
      } else if (this.select === "2") {
        this.parmValue.staff = ""; //客户姓名
        this.parmValue.name = this.input; // 公司名称
        this.parmValue.admin = ""; //业务员姓名
      } else if (this.select === "3") {
        this.parmValue.staff = ""; //客户姓名
        this.parmValue.name = ""; // 公司名称
        this.parmValue.admin = this.input; //业务员姓名
      } else {
        this.parmValue.staff = ""; //客户姓名
        this.parmValue.name = ""; // 公司名称
        this.parmValue.admin = ""; //业务员姓名
      }
      let res = await asyncRequest.list(this.parmValue);
      if (res.code === 0 && res.data) {
        this.tableData = res.data.list;
        this.tableData.map((v1) => {
          if (v1.addtime) {
            v1.addtime = v1.addtime.replaceAll(".000", "");
          }
          return v1;
        });
        this.count = Number(res.data.count);
      } else {
        this.tableData = [];
        this.count = 0;
      }
      this.loading = false;
    },
    async statusConfirm(id, status, ex_status, type) {
      if (!type) {
        return;
      }
      if (ex_status === "1") {
        await this.$confirm(`确定要改为${status === "1" ? "禁用" : "启用"}？`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            this.loading = true;
            const model = {
              id: id,
              status: status === "1" ? "0" : "1",
            };
            const res = await asyncRequest.status(model);
            if (res.code === 0) {
              this.loading = false;
              this.$notify.success({
                title: "状态修改成功！",
                message: "",
              });
              await this.searchList();
            } else {
              this.loading = false;
            }
          })
          .catch(() => {
            console.log("取消");
          });
      } else {
        if (status === "0") {
          this.$message.warning("只有审核通过的规格，才能启用！");
        }
      }
    },
  },
};
</script>
   <style lang="scss" scoped>
.business {
}
</style>
   