<template>
  <div class="m-select_staff" v-show="!hidden">
    <div id="wrap" class="wrap a-fade-in-up">
      <div class="title">
        <div class="row" v-show="currPanel == 'agency'">
          <div class="title-ico f-fl a-fade-in" @click="cancel">
            <img
              class="title-ico-close"
              src="@/assets/img/project/select-staff/close.png"
            />
          </div>
          <div class="title-btn a-fade-in f-fr" @click="confirm">确定</div>
        </div>

        <div class="row" v-show="currPanel == 'staff'">
          <div class="title-ico f-fl a-fade-in-left" @click="shiftAgencyPanel">
            <img
              class="title-ico-back"
              src="@/assets/img/project/select-staff/arrow3-left.png"
            />
          </div>
          <div class="title-btn a-fade-in f-fr" @click="confirmStaff">选中</div>
        </div>
      </div>

      <div class="wrap2 a-fade-in-right" v-show="currPanel == 'agency'">
        <div class="menu-title" v-if="parentAgencyList.length > 0">
          上级组织
        </div>
        <div
          class="menu"
          @click="shiftStaffPanel(item.agencyId)"
          v-for="item in parentAgencyList"
          :key="item.agencyId"
        >
          <div class="name f-fl">{{ item.agencyName }}</div>

          <img
            class="ico-go f-fr"
            src="@/assets/img/project/select-staff/arrow-right.png"
          />
          <div v-if="item.selectedTotal" class="num f-fr">
            (已选{{ item.selectedTotal }}人)
          </div>
        </div>

        <div class="menu-title">我所在的</div>
        <div class="menu" @click="shiftStaffPanel(agency.agencyId)">
          <div class="name f-fl">{{ agency.agencyName }}</div>

          <img
            class="ico-go f-fr"
            src="@/assets/img/project/select-staff/arrow-right.png"
          />
          <div v-if="agency.selectedTotal" class="num f-fr">
            (已选{{ agency.selectedTotal }}人)
          </div>
        </div>

        <div class="menu-title" v-if="subAgencyList.length > 0">下级组织</div>
        <div
          class="menu"
          :class="'z-retract-' + item.retract"
          v-show="!item.hidden"
          @click="shiftStaffPanel(item.agencyId)"
          v-for="(item, index) in subAgencyList"
          :key="item.agencyId"
        >
          <img
            mode="aspectFit"
            @click.stop="shiftUnfold(index)"
            v-if="item.sonIds.length > 0"
            class="ico-fold f-fl"
            :class="!item.folded ? 'z-unfold' : ''"
            src="@/assets/img/project/select-staff/select.png"
          />
          <div class="name f-fl">{{ item.agencyName }}</div>

          <img
            class="ico-go f-fr"
            src="@/assets/img/project/select-staff/arrow-right.png"
          />
          <div v-if="item.selectedTotal" class="num f-fr">
            (已选{{ item.selectedTotal }}人)
          </div>
        </div>

        <div v-if="agencyLoading" class="m-hint">加载中……</div>
      </div>

      <div class="wrap2 a-fade-in-right" v-show="currPanel == 'staff'">
        <div v-if="staffLoading" class="m-hint">加载中……</div>
        <div
          v-else-if="
            staffData.agencyStaffList.length == 0 &&
            staffData.gridList.length == 0 &&
            staffData.departmentList.length == 0
          "
          class="m-hint"
        >
          暂无可选人员
        </div>

        <div v-show="!staffLoading && staffData.agencyStaffList.length != 0">
          <div class="list-title z-retract-1">
            <span>组织工作人员</span>
          </div>

          <div>
            <div
              class="item z-retract-1"
              :key="'agency' + item.staffId"
              v-for="(item, index) in staffData.agencyStaffList"
              @click="selectAgencyStaff(index)"
            >
              <div class="item-wrap">
                <div class="f-fl ico" :class="item.selected ? 'z-on' : ''">
                  <img src="@/assets/img/project/select-staff/selected2.png" />
                </div>

                <img
                  class="f-fl avatar"
                  v-if="item.gender == 1"
                  src="@/assets/img/project/select-staff/staff-default-avatar-boy.png"
                />
                <img
                  class="f-fl avatar"
                  v-else
                  src="@/assets/img/project/select-staff/staff-default-avatar-girl.png"
                />
                <div class="f-fl name">
                  {{ item.staffName }}
                  <span v-if="item.roleName" class="z-stress">{{
                    item.roleName
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          v-show="!staffLoading && staffData.departmentList.length != 0"
          class="list"
        >
          <div class="list-title z-retract-1">
            <div
              class="f-fl ico"
              :class="staffData.departmentSelected ? 'z-on' : ''"
              @click.stop="shiftSelectAllDepartment"
            >
              <img src="@/assets/img/project/select-staff/selected2.png" />
            </div>

            <span>部门</span>
          </div>
          <div
            :key="department.departmentName"
            v-for="(department, departmentIndex) in staffData.departmentList"
          >
            <div
              class="list-title z-retract-2"
              @click="shiftDepartmentUnfold(departmentIndex)"
            >
              <div
                class="f-fl ico"
                :class="department.selected ? 'z-on' : ''"
                @click.stop="shiftSelectDepartment(departmentIndex)"
              >
                <img src="@/assets/img/project/select-staff/selected2.png" />
              </div>

              <span>{{ department.departmentName }}</span>
              <img
                class="f-fr ico-go"
                :class="!department.folded ? 'z-unfold' : ''"
                src="@/assets/img/project/select-staff/select.png"
              />
            </div>

            <div
              class="item z-retract-3"
              v-show="!department.folded"
              :key="department.departmentId + item.staffId"
              v-for="(item, index) in department.departmentStaffList"
              @click="selectDepartmentStaff(departmentIndex, index)"
            >
              <div class="item-wrap">
                <div class="f-fl ico" :class="item.selected ? 'z-on' : ''">
                  <img
                    mode="widthFix"
                    src="@/assets/img/project/select-staff/selected2.png"
                  />
                </div>

                <img
                  class="f-fl avatar"
                  v-if="item.gender == 1"
                  src="@/assets/img/project/select-staff/staff-default-avatar-boy.png"
                />
                <img
                  class="f-fl avatar"
                  v-else
                  src="@/assets/img/project/select-staff/staff-default-avatar-girl.png"
                />
                <div class="f-fl name">
                  {{ item.staffName }}
                  <span v-if="item.roleName" class="z-stress">{{
                    item.roleName
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          v-show="!staffLoading && staffData.gridList.length != 0"
          class="list"
        >
          <div class="list-title z-retract-1">
            <div
              class="f-fl ico"
              :class="staffData.gridSelected ? 'z-on' : ''"
              @click.stop="shiftSelectAllGrid"
            >
              <img src="@/assets/img/project/select-staff/selected2.png" />
            </div>

            <span>网格</span>
          </div>
          <div
            :key="grid.gridName"
            v-for="(grid, gridIndex) in staffData.gridList"
          >
            <div
              class="list-title z-retract-2"
              @click="shiftGridUnfold(gridIndex)"
            >
              <div
                class="f-fl ico"
                :class="grid.selected ? 'z-on' : ''"
                @click.stop="shiftSelectGrid(gridIndex)"
              >
                <img src="@/assets/img/project/select-staff/selected2.png" />
              </div>

              <span>{{ grid.gridName }}</span>
              <img
                class="f-fr ico-go"
                :class="!grid.folded ? 'z-unfold' : ''"
                src="@/assets/img/project/select-staff/select.png"
              />
            </div>

            <div
              class="item z-retract-3"
              v-show="!grid.folded"
              :key="grid.gridId + item.staffId"
              v-for="(item, index) in grid.gridStaffList"
              @click="selectGridStaff(gridIndex, index)"
            >
              <div class="item-wrap">
                <div class="f-fl ico" :class="item.selected ? 'z-on' : ''">
                  <img src="@/assets/img/project/select-staff/selected2.png" />
                </div>

                <img
                  class="f-fl avatar"
                  v-if="item.gender == 1"
                  src="@/assets/img/project/select-staff/staff-default-avatar-boy.png"
                />
                <img
                  class="f-fl avatar"
                  v-else
                  src="@/assets/img/project/select-staff/staff-default-avatar-girl.png"
                />
                <div class="f-fl name">
                  {{ item.staffName }}
                  <span v-if="item.roleName" class="z-stress">{{
                    item.roleName
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import { mapGetters } from "vuex";
import deepClone from "@/utils/deepClone.js";

export default {
  components: {},
  props: {
    issueId: {
      type: String,
      default: "",
    },
    projectId: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      hidden: false,

      // 显示组织还是人员 agency staff
      currPanel: "agency",

      agencyLoading: false,

      agency: {
        agencyId: "",
        agencyName: "",
        selectedTotal: 0,
      },

      parentAgencyList: [
        // {
        //   agencyId: "2",
        //   agencyName: "山东省",
        //   selectedTotal: 0,
        // },
        // {
        //   agencyId: "3",
        //   agencyName: "青岛市",
        //   selectedTotal: 0,
        // },
      ],

      subAgencyList: [
        // {
        //   agencyId: "4",
        //   agencyName: "青岛市",
        //   selectedTotal: 0,
        //   retract: 0,
        //   folded: true,
        //   hidden: false,
        //   sonIds: [5],
        //   desIds: [5, 6, 7, 8],
        // },
        // {
        //   agencyId: "5",
        //   agencyName: "城阳区",
        //   selectedTotal: 2,
        //   retract: 1,
        //   folded: true,
        //   hidden: false,
        //   sonIds: [6],
        //   desIds: [6, 7, 8],
        // },
        // {
        //   agencyId: "6",
        //   agencyName: "黑龙江路街道",
        //   selectedTotal: 2,
        //   retract: 2,
        //   folded: true,
        //   hidden: false,
        //   sonIds: [7, 8],
        //   desIds: [7, 8],
        // },
        // {
        //   agencyId: "7",
        //   agencyName: "桃花源社区",
        //   selectedTotal: 2,
        //   retract: 3,
        //   folded: true,
        //   hidden: false,
        //   sonIds: [],
        //   desIds: [],
        // },
        // {
        //   agencyId: "8",
        //   agencyName: "巴拉巴拉社区",
        //   selectedTotal: 0,
        //   retract: 3,
        //   folded: true,
        //   hidden: false,
        //   sonIds: [],
        //   desIds: [],
        // },
      ],

      staffLoading: false,
      currAgencyId: "",
      staffData: {
        agencyStaffList: [
          // {
          //   staffId: "74758",
          //   staffName: "oHdjWbXSau",
          //   staffHeadPhoto: "HFp20nYBLh",
          //   gender: "pLBQxDJLq3",
          //   roleName: "pRNg4BV92E",
          //   selected: false,
          // },
        ],

        departmentSelected: false,
        departmentList: [
          // {
          //   departmentId: "73782",
          //   departmentName: "bluw7HpyhT",
          //   selected: false,
          //   folded: true,
          //   departmentStaffList: [
          //     {
          //       staffId: "747358",
          //       staffName: "oHdjWbXSau",
          //       staffHeadPhoto: "HFp20nYBLh",
          //       gender: "pLBQxDJLq3",
          //       roleName: "pRNg4BV92E",
          //       selected: false,
          //     },
          //   ],
          // },
        ],

        gridSelected: false,
        gridList: [
          // {
          //   gridId: "73782",
          //   gridName: "bluw7HpyhT",
          //   selected: false,
          //   folded: true,
          //   gridStaffList: [
          //     {
          //       staffId: "747358",
          //       staffName: "oHdjWbXSau",
          //       staffHeadPhoto: "HFp20nYBLh",
          //       gender: "pLBQxDJLq3",
          //       roleName: "pRNg4BV92E",
          //       selected: false,
          //     },
          //   ],
          // },
        ],
      },
    };
  },
  async created() {},
  async mounted() {
    this.getAgencyData();
  },
  computed: {
    tableHeight() {
      return this.clientHeight - 460;
    },
    rowHeight() {
      return this.clientHeight - 200 + "px";
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {},
  methods: {
    setData(obj) {
      if (typeof obj == "object" && obj) {
        Object.keys(obj).forEach((k) => {
          this[k] = obj[k];
        });
      }
    },

    shiftStaffPanel(id) {
      this.setData({
        currPanel: "staff",
        currAgencyId: id,
      });

      this.iniStaffData();
    },

    shiftAgencyPanel() {
      this.setData({
        currPanel: "agency",
        staffData: {
          agencyStaffList: [],
          departmentList: [],
          gridList: [],
          gridSelected: false,
          departmentSelected: false,
        },
      });
    },

    shiftUnfold(index) {
      const { subAgencyList } = this;
      let item = subAgencyList[index];
      item.folded = !item.folded;
      if (item.folded && item.desIds.length > 0) {
        subAgencyList.forEach((sItem) => {
          if (item.desIds.indexOf(sItem.agencyId) !== -1) {
            sItem.hidden = true;
            sItem.folded = true;
          }
        });
      } else if (item.sonIds.length > 0) {
        subAgencyList.forEach((sItem) => {
          if (item.sonIds.indexOf(sItem.agencyId) !== -1) {
            sItem.hidden = false;
          }
        });
      }
      this.setData({ subAgencyList });
    },

    show() {
      this.setData({
        hidden: false,
      });
    },

    hide() {
      // this.setData({ hidden: true });
      this.$emit("close");
    },

    shiftDepartmentUnfold(index) {
      const { staffData } = this;
      let item = staffData.departmentList[index];
      item.folded = !item.folded;
      this.setData({ staffData });
    },

    shiftGridUnfold(index) {
      const { staffData } = this;
      let item = staffData.gridList[index];
      item.folded = !item.folded;
      this.setData({ staffData });
    },

    selectAgencyStaff(index) {
      let { staffData } = this;
      let item = staffData.agencyStaffList[index];
      item.selected = !item.selected;
      this.setData({ staffData });
    },

    selectDepartmentStaff(dindex, index) {
      let { staffData } = this;
      let item = staffData.departmentList[dindex].departmentStaffList[index];
      item.selected = !item.selected;
      this.setData({ staffData });
      this.computeStaffSupSelected();
    },
    selectGridStaff(dindex, index) {
      let { staffData } = this;
      let item = staffData.gridList[dindex].gridStaffList[index];
      item.selected = !item.selected;
      this.setData({ staffData });
      this.computeStaffSupSelected();
    },

    // 重新计算staff所属部门、网格的选中情况
    computeStaffSupSelected() {
      let { staffData } = this;
      staffData.departmentList.forEach((dpt) => {
        dpt.selected = dpt.departmentStaffList.some((staff) => staff.selected);
      });
      staffData.gridList.forEach((dpt) => {
        dpt.selected = dpt.gridStaffList.some((staff) => staff.selected);
      });
      staffData.departmentSelected = staffData.departmentList.every(
        (dpt) => dpt.selected
      );
      staffData.gridSelected = staffData.gridList.every((dpt) => dpt.selected);
      this.setData({ staffData });
    },

    shiftSelectAllDepartment() {
      const { staffData } = this;
      if (staffData.departmentSelected) {
        staffData.departmentSelected = false;
        staffData.departmentList.forEach((item) => {
          this.selectDepartment(item, false);
        });
        this.setData({ staffData });
      } else {
        staffData.departmentList.forEach((item) => {
          this.selectDepartment(item, true);
        });
        this.setData({ staffData });
        this.computeStaffSupSelected();
      }
    },
    shiftSelectDepartment(index) {
      const { staffData } = this;
      let dItem = staffData.departmentList[index];
      this.selectDepartment(dItem, !dItem.selected);
      this.setData({ staffData });
      this.computeStaffSupSelected();
    },
    selectDepartment(dItem, selected = true) {
      if (!selected) {
        dItem.selected = false;
        dItem.departmentStaffList.forEach((item) => {
          item.selected = false;
        });
        return "";
      } else {
        let succ = false;
        dItem.departmentStaffList.forEach((item) => {
          if (item.roleName == "部门领导") {
            item.selected = true;
            succ = true;
          } else {
            item.selected = false;
          }
        });
        if (!succ) {
          return this.$message.error(dItem.departmentName + "下无【部门领导】");
        } else {
          dItem.selected = true;
        }
      }
    },

    shiftSelectAllGrid() {
      const { staffData } = this;
      if (staffData.gridSelected) {
        staffData.gridSelected = false;
        staffData.gridList.forEach((item) => {
          this.selectGrid(item, false);
        });
        this.setData({ staffData });
      } else {
        staffData.gridList.forEach((item) => {
          this.selectGrid(item, true);
        });
        this.setData({ staffData });
        this.computeStaffSupSelected();
      }
    },
    shiftSelectGrid(index) {
      const { staffData } = this;
      let dItem = staffData.gridList[index];
      this.selectGrid(dItem, !dItem.selected);
      this.setData({ staffData });
      this.computeStaffSupSelected();
    },
    selectGrid(dItem, selected = true) {
      if (!selected) {
        dItem.selected = false;
        dItem.gridStaffList.forEach((item) => {
          item.selected = false;
        });
        return "";
      } else {
        let succ = false;
        dItem.gridStaffList.forEach((item) => {
          if (item.roleName == "网格长") {
            item.selected = true;
            succ = true;
          } else {
            item.selected = false;
          }
        });
        if (!succ) {
          return this.$message.error(dItem.gridName + "下无【网格长】");
        } else {
          dItem.selected = true;
        }
      }
    },

    // 输出staffData格式为接口想要的格式
    outputStaffData(staffData, agencyId) {
      let arr = [];
      const addFn = (item, departmentId = "", gridId = "") => {
        if (item.selected) {
          arr.push({
            agencyId,
            staffId: item.staffId,
            departmentId,
            gridId,
          });
        }
      };
      staffData.agencyStaffList.forEach((item) => addFn(item));
      staffData.departmentList.forEach((sitem) => {
        sitem.departmentStaffList.forEach((item) =>
          addFn(item, sitem.departmentId)
        );
      });
      staffData.gridList.forEach((sitem) => {
        sitem.gridStaffList.forEach((item) => addFn(item, "", sitem.gridId));
      });
      return arr;
    },

    confirmStaff() {
      const { staffData, currAgencyId } = this;
      let { agency, parentAgencyList, subAgencyList } = this;
      [agency, ...parentAgencyList, ...subAgencyList].some((item) => {
        if (item.agencyId == currAgencyId) {
          item.staffData = staffData;
          item.selectedTotal = this.outputStaffData(
            staffData,
            currAgencyId
          ).length;
          return true;
        }
        return false;
      });
      this.setData({
        agency,
        parentAgencyList,
        subAgencyList,
      });
      this.shiftAgencyPanel();
    },

    confirm() {
      let ret = [];
      const { agency, parentAgencyList, subAgencyList } = this;
      [agency, ...parentAgencyList, ...subAgencyList].forEach((item) => {
        if (item.staffData) {
          let arr = this.outputStaffData(item.staffData, item.agencyId);
          ret.push(...arr);
        }
      });
      this.hide();
      this.$emit("confirm", ret);
    },

    cancel() {
      this.hide();
    },

    iniStaffData() {
      const { currAgencyId } = this;
      if (!currAgencyId) return;
      const { agency, parentAgencyList, subAgencyList } = this;
      let staffData;
      [agency, ...parentAgencyList, ...subAgencyList].some((item) => {
        if (item.agencyId == currAgencyId) {
          if (item.staffData) {
            staffData = deepClone(item.staffData);
          }
          return true;
        }
        return false;
      });
      if (!staffData) {
        this.getStaffData();
      } else {
        this.setData({ staffData });
      }
    },

    // 获取当前组织信息
    async getStaffData() {
      const { issueId, projectId, currAgencyId } = this;

      this.setData({
        staffLoading: true,
      });

      const url = projectId
        ? "/gov/project/trace/departmentstafflist"
        : "/gov/issue/manage/departmentstafflist";

      const { data, code, msg } = await requestPost(
        url,
        {
          issueId,
          projectStaffId: projectId,
          agencyId: currAgencyId,
        },
        {
          // isMock: true,
          // isQuiet: true
        }
      );

      this.setData({
        staffLoading: false,
      });

      if (msg === "success" && code === 0) {
        const staffFn = (item) => {
          item.selected = false;
          return item;
        };
        const departmentFn = (item) => {
          item.selected = false;
          item.folded = true;
          item.departmentStaffList.forEach(staffFn);
          return item;
        };
        const gridFn = (item) => {
          item.selected = false;
          item.folded = true;
          item.gridStaffList.forEach(staffFn);
          return item;
        };
        let agencyStaffList =
          data == null || !Array.isArray(data.agencyStaffList)
            ? []
            : data.agencyStaffList.map(staffFn);
        let departmentList =
          data == null || !Array.isArray(data.departmentList)
            ? []
            : data.departmentList.map(departmentFn);
        let gridList =
          data == null || !Array.isArray(data.gridList)
            ? []
            : data.gridList.map(gridFn);
        this.setData({
          staffData: {
            agencyStaffList,
            departmentList,
            gridList,
            gridSelected: false,
            departmentSelected: false,
          },
        });
      }
    },

    // 获取当前组织信息
    async getAgencyData() {
      const { projectId, issueId } = this;

      this.setData({
        agencyLoading: true,
      });

      const url = projectId
        ? "/gov/project/trace/processorlist"
        : issueId
        ? "/gov/issue/manage/processorlist"
        : "/gov/project/trace/approvalagencylist";

      const { data, code, msg } = await requestPost(
        url,
        {
          projectStaffId: projectId,
          issueId,
        },
        {
          // isMock: true,
          // isQuiet: true
        }
      );

      this.setData({
        agencyLoading: false,
      });

      if (msg === "success" && code === 0) {
        let agency = {
          ...data.agencyList,
          selectedTotal: 0,
        };
        let parentAgencyList = data.parentAgencyList.map((item) => {
          return {
            ...item,
            selectedTotal: 0,
          };
        });

        let rootSubAgencyList = [];
        let tempForSort = 0;
        const subFn = (list, retract = 0) => {
          let sonIds = [];
          let desIds = [];
          list.forEach((item) => {
            const { agencyName, agencyId, subAgencyList } = item;
            let ret = {
              agencyId,
              agencyName,
              selectedTotal: 0,
              retract,
              folded: true,
              hidden: retract !== 0,
              sonIds: [],
              desIds: [],
            };
            sonIds.push(agencyId);
            desIds.push(agencyId);
            rootSubAgencyList.push(ret);
            if (Array.isArray(subAgencyList) && subAgencyList.length > 0) {
              let subData = subFn(subAgencyList, retract + 1);
              ret.sonIds = subData.sonIds;
              ret.desIds = subData.desIds;

              desIds.push(...subData.desIds);
            }
          });
          return { sonIds, desIds };
        };
        subFn(data.subAgencyList);

        console.log(rootSubAgencyList);
        this.setData({
          agencyLoading: false,
          agency,
          parentAgencyList,
          subAgencyList: rootSubAgencyList,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/c/config.scss";
@import "@/assets/scss/c/function.scss";

.m-hint {
  text-align: center;
  padding: 150px * 0.5 50px * 0.5;
  line-height: 50px * 0.5;
  color: #999;
  text-align: center;
  font-size: 32px * 0.5;
  font-family: PingFang SC;
  font-weight: 500;
}

.m-select_staff {
  // @include shield;
  // z-index: 1000;
  position: relative;
  width: 380px;
  height: 60vh;
  overflow: hidden;

  .wrap {
    position: absolute;
    box-sizing: border-box;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px * 0.5 10px * 0.5 0 0;
  }

  .wrap2 {
    box-sizing: border-box;
    height: 100%;
    padding-top: 10px * 0.5;
    padding-bottom: 120px * 0.5;
    overflow-y: scroll;
  }

  .operate {
    position: absolute;
    z-index: 100;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px * 0.5;
    background-color: #ffffff;
    border-top: 1px * 0.5 solid #eee;

    .btn {
      float: left;
      width: 50%;
      text-align: center;
      line-height: 100px * 0.5;
      background-color: rgba(230, 0, 0, 1);
      color: #ffffff;
      text-align: center;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 500;
      &.btn-off {
        background-color: #ffffff;
        color: #666;
      }
    }
  }

  .title {
    position: relative;
    margin: 0 auto;
    padding: 20px * 0.5 0;
    width: 710px * 0.5;
    line-height: 60px * 0.5;
    border-bottom: 1px * 0.5 solid #e7eeee;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(151, 151, 151, 1);
    .row {
      overflow: hidden;
    }
    .title-ico {
      position: relative;
      width: 60px * 0.5;
      height: 60px * 0.5;
      img {
        @include hub;
        &.title-ico-back {
          width: 19px * 0.5;
          height: 34px * 0.5;
        }
        &.title-ico-close {
          width: 35px * 0.5;
          height: 35px * 0.5;
        }
      }
    }
    .title-btn {
      width: 140px * 0.5;
      height: 60px * 0.5;
      line-height: 60px * 0.5;
      background: rgba(230, 0, 0, 1);
      border-radius: 30px * 0.5;
      font-size: 32px * 0.5;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
  }

  .back-btn {
    box-sizing: border-box;
    margin: 15px * 0.5 20px * 0.5;
    padding: 10px * 0.5 5px * 0.5;
    width: 200px * 0.5;
    border: 1px * 0.5 solid #e5e5e5;
    line-height: 60px * 0.5;
    border-radius: 10px * 0.5;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #e00;
    text-align: center;
  }

  .menu-title {
    margin-top: 20px * 0.5;
    padding: 0 20px * 0.5;
    line-height: 50px * 0.5;
    font-size: 28px * 0.5;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
  }

  .menu {
    @include cs;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px * 0.5 10px * 0.5;
    width: 710px * 0.5;
    border-top: 1px * 0.5 solid #fefefe;
    line-height: 40px * 0.5;

    .ico-radio {
      position: relative;
      display: block;
      width: 50px * 0.5;
      height: 40px * 0.5;
      margin-right: 10px * 0.5;
      transition: all 0.23s ease-in-out;

      &::before {
        @include hub;
        content: "";
        display: block;
        width: 22px * 0.5;
        height: 22px * 0.5;
        border-radius: 100%;
        border: 3px * 0.5 solid #aaa;
        transition: all 0.23s ease-in-out;
      }

      &::after {
        @include hub;
        content: "";
        display: block;
        width: 10px * 0.5;
        height: 10px * 0.5;
        border-radius: 100%;
        background-color: #aaa;
        transform: scale(0);
        transition: all 0.23s ease-in-out;
      }

      &.z-disabled {
        &::before {
          border-color: #e5e5e5;
        }
        &::after {
          background-color: #e5e5e5;
        }
      }

      &.z-on {
        &::before {
          border-color: #00e;
        }
        &::after {
          background-color: #00e;
          transform: scale(1);
        }
      }
    }

    .ico-fold {
      display: inline-block;
      box-sizing: content-box;
      margin-left: -20px * 0.5;
      padding: 4px * 0.5 10px * 0.5;
      width: 32px * 0.5;
      height: 32px * 0.5;
      vertical-align: bottom;
      transition: all 0.23s ease-in-out;
      cursor: pointer;

      &.z-unfold {
        transform: rotate(90deg);
      }
    }

    .name {
      // @include toe;
      width: 400px * 0.5;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      cursor: pointer;
    }

    .num {
      font-size: 26px * 0.5;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(230, 0, 0, 1);
    }

    .ico-go {
      display: block;
      margin: 10px * 0.5 15px * 0.5;
      width: 13px * 0.5;
      height: 24px * 0.5;
      transition: all 0.23s ease-in-out;

      &.z-unfold {
        transform: rotate(90deg);
      }
    }
  }

  .list {
    margin-top: 30px * 0.5;
    view {
      .list-title {
        font-size: 18px;
      }
    }
  }

  .list-title {
    margin: 5px * 0.5 0;
    padding: 20px * 0.5;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 32px * 0.5;
    cursor: pointer;

    .ico {
      position: relative;
      top: -8px * 0.5;
      margin-left: -15px * 0.5;
      margin-right: 2px * 0.5;
      width: 50px * 0.5;
      height: 50px * 0.5;
      cursor: pointer;

      &::after,
      img {
        position: absolute;
        display: block;
        box-sizing: border-box;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 20px * 0.5;
        height: 20px * 0.5;
        display: block;
      }
      &::after {
        content: "";
        z-index: 1;
        border: 1px solid rgba(153, 153, 153, 1);
        border-radius: 1px;
      }
      img {
        z-index: 2;
        opacity: 0;
        transform: scale(0);
        transition: all 0.23s ease-in-out;
      }
      &.z-on {
        &::after {
          opacity: 0;
        }
        img {
          opacity: 1;
          transform: scale(1);
        }
      }
    }

    > img {
      display: inline-block;
      margin: 0 10px * 0.5;
      width: 32px * 0.5;
      height: 32px * 0.5;
      vertical-align: bottom;
      transition: all 0.23s ease-in-out;

      &.z-unfold {
        transform: rotate(90deg);
      }
    }
  }

  .item {
    overflow: hidden;
    cursor: pointer;

    .item-wrap {
      box-sizing: border-box;
      padding: 20px * 0.5;
      height: 90px * 0.5;
      line-height: 50px * 0.5;
      overflow: hidden;
      border-bottom: 1px * 0.5 solid #fefefe;

      .ico {
        position: relative;
        margin-left: -15px * 0.5;
        margin-right: 2px * 0.5;
        width: 50px * 0.5;
        height: 50px * 0.5;

        &::after,
        img {
          position: absolute;
          display: block;
          box-sizing: border-box;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          width: 20px * 0.5;
          height: 20px * 0.5;
          display: block;
        }
        &::after {
          content: "";
          z-index: 1;
          border: 1px solid rgba(153, 153, 153, 1);
          border-radius: 1px;
        }
        img {
          z-index: 2;
          opacity: 0;
          transform: scale(0);
          transition: all 0.23s ease-in-out;
        }
        &.z-on {
          &::after {
            opacity: 0;
          }
          img {
            opacity: 1;
            transform: scale(1);
          }
        }
      }

      .avatar {
        position: relative;
        margin-right: 10px * 0.5;
        width: 50px * 0.5;
        height: 50px * 0.5;

        img {
          width: 50px * 0.5;
          height: 50px * 0.5;
          border-radius: 100%;
        }
      }

      .name {
        @include toe;
        width: 70%;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);

        .z-stress {
          position: relative;
          display: inline-block;
          vertical-align: middle;
          box-sizing: content-box;
          top: -2px;
          padding: 0 4px;
          height: 16px;
          line-height: 16px;
          border: 1px * 0.5 solid rgba(187, 19, 19, 1);
          border-radius: 16px;
          font-size: 10px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(187, 19, 19, 1);
        }
      }

      .else {
        text {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(153, 153, 153, 1);
        }
        img {
          display: inline-block;
          margin: 16px * 0.5 12px * 0.5;
          width: 13px * 0.5;
          height: 24px * 0.5;
          vertical-align: bottom;
        }
      }
    }
  }

  .z-retract-1 {
    padding-left: 25px * 0.5;
  }
  .z-retract-2 {
    padding-left: 25px * 0.5 * 2;
  }
  .z-retract-3 {
    padding-left: 25px * 0.5 * 3;
  }
  .z-retract-4 {
    padding-left: 25px * 0.5 * 4;
  }
}
</style>
