<template>
  <div class="customer-wrap">
    <el-radio-group class="header-radio" v-model="custType" @change="custTypeChangeFn">
      <el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
      <el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button>
      <el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
    </el-radio-group>
    <div class="special_title">
      <div class="special_title_ft">走访任务进度</div>
      <el-form :model="queryForm" label-width="70px" :inline="true">
        <el-form-item label="统计日期" prop="dataDt">
          <el-date-picker
            v-model="queryForm.dataDt"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="统计日期"
            @change="queryChangeFn('dataDt')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="业务指标" prop="tabId">
          <el-select
            v-model="queryForm.tabId"
            placeholder="请选择"
            size="small"
            @change="queryChangeFn('tabId')"
          >
            <el-option v-for="(item, index) in tabIdList" :key="index" :label="item" :value="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支行" prop="brachName">
          <el-input
            v-model="queryForm.brachName"
            placeholder="请输入支行"
            @blur="queryChangeFn('brachName')"
          />
        </el-form-item>
        <el-form-item label="客户经理" prop="managerName">
          <el-input
            v-model="queryForm.managerName"
            placeholder="请输入客户经理"
            @blur="queryChangeFn('managerName')"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="special_box">
      <div class="special_box_item" v-loading="brachLoading">
        <div class="special_box_item_title">支行排名</div>
        <div class="special_box_item_box" v-for="(v,k) in brachList" :key="k">
          <div class="special_box_item_box_lf">
            <div
              :class="[k<=2 && brachPageNum == 1?'special_box_item_box_lf_index': 'special_box_item_box_lf_index2',k<=2 && brachPageNum == 1?'color'+k: '']"
            >{{k+1}}</div>
            <div class="special_box_item_box_lf_name" :title="v.belongId">{{v.belongId}}</div>
            <div class="special_box_item_box_lf_value">{{v.tabValue}}</div>
          </div>
          <div class="special_box_item_box_rg" @click="pjFn(v)">评价</div>
        </div>
        <div class="special_box_item_pag">
          <el-pagination
            layout="prev, pager, next, sizes"
            :current-page="brachPageNum"
            :page-size="brachPageSize"
            :page-sizes="[10, 20, 30, 50]"
            @current-change="brachCurrentChangeFn"
            :total="brachTotal"
            @size-change="brachSizeChangeFn"
          ></el-pagination>
        </div>
      </div>
      <div class="special_box_item" v-loading="managerLoading">
        <div class="special_box_item_title">客户经理排名</div>
        <div class="special_box_item_box" v-for="(v,k) in managerList" :key="k">
          <div class="special_box_item_box_lf">
            <div
              :class="[k<=2 && managerPageNum == 1?'special_box_item_box_lf_index': 'special_box_item_box_lf_index2',k<=2 && managerPageNum == 1?'color'+k: '']"
            >{{k+1}}</div>
            <div class="special_box_item_box_lf_name" :title="v.belongId">{{v.belongId}}</div>
            <div class="special_box_item_box_lf_value">{{v.tabValue}}</div>
          </div>
          <div class="special_box_item_box_rg" @click="pjFn(v)">评价</div>
        </div>
        <div class="special_box_item_pag">
          <el-pagination
            layout="prev, pager, next, sizes"
            :current-page="managerPageNum"
            :page-size="managerPageSize"
            :page-sizes="[10, 20, 30, 50]"
            @current-change="managerCurrentChangeFn"
            :total="managerTotal"
            @size-change="managerSizeChangeFn"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-drawer
      :visible.sync="showFlag"
      :size="900"
      :with-header="false"
      direction="rtl"
      :append-to-body="true"
      :wrapper-closable="false"
    >
      <div class="sp_evalua">
        <div class="sp_evalua_collapse" @click="showFlag = false">
          <span>收起>></span>
        </div>
        <div class="sp_evalua_title">
          <div class="sp_evalua_title_line"></div>
          <div class="sp_evalua_title_ft">评价信息</div>
        </div>
        <el-button size="small" type="primary" @click="addFn" style="margin:20px 0px">新增</el-button>
        <div v-for="(v,k) in pjList" :key="k" class="sp_evalua_item">
          <div class="sp_evalua_item_d">
            <div class="sp_evalua_item_d_lf">评论人员：</div>
            <div class="sp_evalua_item_d_rg">{{v.belongId}}</div>
          </div>
          <div class="sp_evalua_item_d">
            <div class="sp_evalua_item_d_lf">评论时间：</div>
            <div class="sp_evalua_item_d_rg">{{v.dataDt}}</div>
          </div>
          <div class="sp_evalua_item_d">
            <div class="sp_evalua_item_d_lf">评论信息：</div>
            <div class="sp_evalua_item_d_rg">{{v.comment}}</div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-dialog title="评价" :visible.sync="showAddFlag" width="700px">
      <el-form :model="pjForm" ref="pjFormRef" label-width="80px" :rules="pjRules">
        <el-form-item label="评价" prop="comment">
          <el-input
            type="textarea"
            v-model="pjForm.comment"
            style="width: 100%"
            placeholder="请输入"
            rows="4"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="pjAddFn">新增</el-button>
        <el-button @click="showAddFlag = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  systemRankingIndexList,
  systemRankingList,
  systemRankingId,
  systemRanking
} from "@/api/grid/visit/checklist/index.js";
import dayjs from "dayjs";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      custType: "0",
      brachLoading: false,
      managerLoading: false,
      queryForm: {
        dataDt: "",
        tabId: "",
        brachName: "",
        managerName: ""
      },
      tabIdList: [],
      brachPageNum: 1,
      brachPageSize: 10,
      brachTotal: 0,
      managerPageNum: 1,
      managerPageSize: 10,
      managerTotal: 0,
      brachList: [],
      managerList: [],

      showFlag: false,
      pjObj: "",
      pjList: [],

      showAddFlag: false,
      pjForm: {
        comment: ""
      },
      pjRules: {
        comment: [{ required: true, message: "请输入评价", trigger: "blur" }]
      }
    };
  },
  computed: {
    ...mapGetters(["roles"]),
    isPublic() {
      return this.roles.includes("headPublic");
    },
    isPrivate() {
      return this.roles.includes("headPrivate");
    }
  },
  created() {
    this.queryForm.dataDt = dayjs().format("YYYY-MM-DD");
    this.systemRankingIndexListFn();
  },
  methods: {
    systemRankingIndexListFn() {
      systemRankingIndexList({}).then(response => {
        this.tabIdList = response.data;
        const keys = Object.keys(this.tabIdList);
        this.queryForm.tabId = keys[0];
        this.systemRankingListBrachFn();
        this.systemRankingListManagerFn();
      });
    },
    custTypeChangeFn() {
      this.queryForm.brachName = "";
      this.queryForm.managerName = "";
      this.clearDataFn();
      this.systemRankingListBrachFn();
      this.systemRankingListManagerFn();
    },
    clearDataFn() {
      this.brachPageNum = 1;
      this.brachPageSize = 10;
      this.brachTotal = 0;
      this.managerPageNum = 1;
      this.managerPageSize = 10;
      this.managerTotal = 0;
    },
    queryChangeFn(type) {
      this.clearDataFn();
      this.systemRankingListBrachFn();
      this.systemRankingListManagerFn();
    },
    systemRankingListBrachFn() {
      this.brachLoading = true;
      const params = {
        custType: this.custType,
        pageNum: this.brachPageNum,
        pageSize: this.brachPageSize,
        dataDt: this.queryForm.dataDt,
        level: "branch",
        name: this.queryForm.brachName,
        tabId: this.queryForm.tabId
      };
      systemRankingList(params).then(response => {
        this.brachLoading = false;
        if (response.code === 200) {
          this.brachList = response.rows || [];
          this.brachTotal = response.total || 0;
        }
      });
    },
    systemRankingListManagerFn() {
      this.managerLoading = true;
      const params = {
        custType: this.custType,
        pageNum: this.managerPageNum,
        pageSize: this.managerPageSize,
        dataDt: this.queryForm.dataDt,
        level: "manager",
        name: this.queryForm.managerName,
        tabId: this.queryForm.tabId
      };
      systemRankingList(params).then(response => {
        this.managerLoading = false;
        if (response.code === 200) {
          this.managerList = response.rows || [];
          this.managerTotal = response.total || 0;
        }
      });
    },
    brachCurrentChangeFn(val) {
      this.brachPageNum = val;
      this.systemRankingListBrachFn();
    },
    brachSizeChangeFn(val) {
      this.brachPageSize = val;
      this.systemRankingListBrachFn();
    },
    managerCurrentChangeFn(val) {
      this.managerPageNum = val;
      this.systemRankingListManagerFn();
    },
    managerSizeChangeFn(val) {
      this.managerPageSize = val;
      this.systemRankingListManagerFn();
    },

    pjFn(v) {
      this.pjObj = {};
      this.pjObj = v;
      this.systemRankingIdFn("open");
    },
    systemRankingIdFn(type) {
      systemRankingId(this.pjObj.id).then(response => {
        if (type == "open") {
          this.showFlag = true;
        }
        if (response.code === 200) {
          this.pjList = response.data || [];
        }
      });
    },

    addFn() {
      this.pjForm = {
        comment: ""
      };
      this.showAddFlag = true;
    },
    pjAddFn() {
      this.$refs["pjFormRef"].validate(valid => {
        if (valid) {
          const params = {
            comment: this.pjForm.comment,
            rankingId: this.pjObj.id
          };
          systemRanking(params).then(response => {
            if (response.code === 200) {
              this.$message.success("新增成功！");
              this.showAddFlag = false;
              this.systemRankingIdFn();
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.customer-wrap {
  background-color: #fafafb;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  height: calc(100vh - 145px);
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  .header-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;

    .btn-disabled {
      ::v-deep .el-radio-button__inner {
        background-color: #e7e7e7;
      }
    }

    .el-radio-button {
      flex: 1;

      ::v-deep .el-radio-button__inner {
        width: 100%;
        border: none;
        font-weight: 400;
        letter-spacing: 0.44px;
        line-height: 25px;
        font-size: 16px;
        color: #666666;
        padding: 11px 0 12px 0;
      }

      ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background-color: #4886f8;
        font-weight: 400;
        color: #ffffff;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:nth-child(2) {
        &::before,
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          height: 21px;
          width: 1px;
          background: #ebebeb;
          z-index: 1;
        }

        &::after {
          right: 1px;
        }
      }

      &.is-active {
        &::before,
        &::after {
          content: none;
        }
      }
    }
  }
}
.special_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15px 20px;
  background-color: #ffffff;
  &_ft {
    font-weight: bold;
    margin-right: 20px;
  }
  ::v-deep .el-form-item {
    margin-bottom: 0px;
  }
}
.special_box {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  &_item {
    background-color: #ffffff;
    width: calc(50% - 15px);
    border-radius: 10px;
    padding-bottom: 20px;
    &_title {
      font-weight: bold;
      padding: 15px 20px;
    }
    &_box {
      padding: 15px 20px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      &_lf {
        display: flex;
        flex-direction: row;
        align-items: center;
        &_index {
          width: 30px;
          height: 30px;
          border-radius: 30px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          color: #ffffff;
        }
        &_index2 {
          width: 30px;
          height: 30px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          color: #575757;
        }
        &_name {
          margin-left: 20px;
          font-weight: bold;
          width: 300px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &_value {
          margin-left: 20px;
          font-weight: bold;
        }
      }
      &_rg {
        cursor: pointer;
        color: #7d7d7d;
      }
    }
    &_pag {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.color0 {
  background-color: #f6d705;
}
.color1 {
  background-color: #ee8415;
}
.color2 {
  background-color: #1684fc;
}
.sp_evalua {
  padding: 30px 30px 100px 30px;
  &_collapse {
    position: fixed;
    right: 900px;
    background: #fff;
    height: 100px;
    font-size: 14px;
    color: #4886f8;
    margin-left: 2px;
    display: flex;
    align-items: center;
    top: 38%;
    cursor: pointer;
    padding-left: 5px;
    border-radius: 10px 0 0 10px;
  }
  &_title {
    display: flex;
    flex-direction: row;
    align-items: center;
    &_line {
      width: 3px;
      height: 16px;
      background-color: #4886f8;
      margin-right: 7px;
    }
    &_ft {
      font-weight: bold;
    }
  }
  &_item {
    border: 1px solid rgba(187, 187, 187, 1);
    width: 100%;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    &_d {
      display: flex;
      flex-direction: row;
      color: #595959;
      margin-bottom: 8px;
      &_lf {
        flex: 0 0 auto;
        padding-right: 5px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
      }
      &_rg {
        flex: 1;
        min-width: 0px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 0.9);
        font-size: 14px;
      }
    }
  }
}
</style>