<template>
  <vxe-modal
    v-model="showModal"
    title="案件分派"
    @hide="onHide"
    height="582"
    width="1003"
    show-footer
    esc-closable
  >
    <div class="allocation-wrap">
      <div class="top">
        <div class="number-box">
          <div class="number-left">
            <div class="icon-wrapper">
              <el-icon><UserFilled size="850" /></el-icon>
            </div>
          </div>
          <div class="number-right">
            <p>待分派案人人数</p>
            <p>{{ currentAccount.people }}</p>
          </div>
        </div>
        <div class="number-box">
          <div class="number-left">
            <div class="icon-wrapper">
              <el-icon><List /></el-icon>
            </div>
          </div>
          <div class="number-right">
            <p>待分派案件数量</p>
            <p>{{ currentAccount.case }}</p>
          </div>
        </div>
        <div class="number-box">
          <div class="number-left">
            <div class="icon-wrapper">
              <el-icon><UserFilled size="850" /></el-icon>
            </div>
          </div>
          <div class="number-right">
            <p>待分派金额</p>
            <p>{{ currentAccount.money }}</p>
          </div>
        </div>
      </div>
      <div class="Content">
        <template v-if="!step">
          <div style="margin-top: 10px; margin-bottom: 10px">
            <el-radio-group v-model="radio">
              <el-radio :value="0">分配到调解中心</el-radio>
              <el-radio :value="1">分配到CPE</el-radio>
            </el-radio-group>
          </div>
          <div class="mainContent">
            <div class="tree-wrapper">
              <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
            </div>
            <el-transfer
              v-model="value1"
              :data="data1"
              :titles="['CPE', '已选CPE']"
              ref="mytransfer"
              @left-check-change="leftChange"
            />
          </div>
        </template>
        <template v-else>
          <p>分派方案</p>
          <div class="idea-box">
            <div class="left-idea">
              <div class="idea-btn">
                <el-button
                  type="primary"
                  :plain="currentAllBtn === 1 ? false : true"
                  @click="chooseIdea(1)"
                  >以案人数均分</el-button
                >
                <el-button
                  type="primary"
                  :plain="currentAllBtn === 2 ? false : true"
                  @click="chooseIdea(2)"
                  >以案件数均分</el-button
                >
                <el-button
                  type="primary"
                  :plain="currentAllBtn === 3 ? false : true"
                  @click="chooseIdea(3)"
                  >以委案金额均分</el-button
                >
              </div>
              <div class="reset-btn">
                <el-button type="primary" link :icon="RefreshRight" @click="resetAllocation"
                  >重新分配</el-button
                >
              </div>
            </div>
            <div class="right-idea">
              <ProTable
                :config="config"
                :data="tabledata"
                ref="caseLRef"
                :showPagination="false"
                :showToolBar="false"
              >
              </ProTable>
            </div>
          </div>
        </template>
      </div>
    </div>
    <template #footer>
      <el-button @click="backform" v-if="step" style="float: left">上一步</el-button>
      <el-button type="default" @click="showModal = false">取消</el-button>
      <el-button type="primary" @click="submitForm" v-if="step || radio === 0">确认提交</el-button>
      <el-button type="primary" @click="submitForm" v-else>下一步</el-button>
    </template>
  </vxe-modal>
</template>

<script setup lang="jsx" name="allocationModal">
  import { UserFilled } from '@element-plus/icons-vue';
  import { RefreshRight } from '@element-plus/icons-vue';
  import { ElInputNumber } from 'element-plus';

  import { computed } from 'vue';
  import { reactive, ref } from 'vue';
  const data = ref([]);
  const mytransfer = ref();
  const tabledata = ref([]);

  const showModal = ref(false);
  const currentAccount = ref({ people: 0, case: 0, money: 0 });
  const currentAllBtn = ref(1);
  const editRowIndex = ref(-1);

  const radio = ref(0);
  const step = ref(0);

  const onHide = () => {
    currentAccount.value = { people: 0, case: 0, money: 0 };
  };
  const openModal = (account) => {
    showModal.value = true;
    currentAccount.value = { people: 333, case: 44, money: 1111 };
    step.value = 0;
    radio.value = 0;
    currentAllBtn.value = 1;
    editRowIndex.value = -1;
  };
  const backform = () => {
    step.value = 0;
  };
  const submitForm = () => {
    if (step.value || radio.value === 0) {
    } else {
      step.value = 1;
    }
  };
  const handleNodeClick = (data) => {
    console.log(data);
  };
  const chooseIdea = (type) => {
    editRowIndex.value = -1;
    currentAllBtn.value = type;
  };
  const resetAllocation = () => {
    editRowIndex.value = -1;
  };
  const changeNum = (type, row, index) => {
    editRowIndex.value = index;
    console.log('changeNum', type, row, index);
  };
  const leftChange = (value, direction) => {
    console.log(value, direction); //这个就是它包含的所有的属性以及事件，如果需要别的操作直接执行，也可以查询到
  };
  data.value = [
    {
      label: 'Level one 1',
      children: [
        {
          label: 'Level two 1-1',
          children: [
            {
              label: 'Level three 1-1-1',
            },
          ],
        },
      ],
    },
    {
      label: 'Level one 2',
      children: [
        {
          label: 'Level two 2-1',
          children: [
            {
              label: 'Level three 2-1-1',
            },
          ],
        },
        {
          label: 'Level two 2-2',
          children: [
            {
              label: 'Level three 2-2-1',
            },
          ],
        },
      ],
    },
    {
      label: 'Level one 3',
      children: [
        {
          label: 'Level two 3-1',
          children: [
            {
              label: 'Level three 3-1-1',
            },
          ],
        },
        {
          label: 'Level two 3-2',
          children: [
            {
              label: 'Level three 3-2-1',
            },
          ],
        },
      ],
    },
  ];
  const config = computed(() => {
    // 去除分页控件，toolbar控件
    return {
      toolbarConfig: { enabled: false },
      columns: [
        { type: 'seq', width: 50, title: '序号' },
        {
          field: 'code',
          title: 'CPE',
        },
        {
          field: 'code',
          title: '分派案人数',
          slots: {
            default: ({ row, rowIndex }) => {
              if (currentAllBtn.value === 1) {
                return (
                  <>
                    <ElInputNumber
                      v-model={row.num}
                      onChange={() => changeNum(1, row, rowIndex)}
                      disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
                    />
                  </>
                );
              } else {
                return <>{row.num}</>;
              }
            },
          },
        },
        {
          field: 'code',
          title: '分派案件数',
          slots: {
            default: ({ row, rowIndex }) => {
              if (currentAllBtn.value === 2) {
                return (
                  <>
                    <ElInputNumber
                      v-model={row.num}
                      onChange={() => changeNum(2, row, rowIndex)}
                      disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
                    />
                  </>
                );
              } else {
                return <>{row.num}</>;
              }
            },
          },
        },
        {
          field: 'code',
          title: '分派委案金额',
          slots: {
            default: ({ row, rowIndex }) => {
              if (currentAllBtn.value === 3) {
                return (
                  <>
                    <ElInputNumber
                      v-model={row.num}
                      onChange={() => changeNum(3, row, rowIndex)}
                      disabled={editRowIndex.value > -1 && editRowIndex.value !== rowIndex}
                    />
                  </>
                );
              } else {
                return <>{row.num}</>;
              }
            },
          },
        },
      ],
    };
  });

  tabledata.value = [
    { name: 'admin', code: 'admin', role: 'superadmin', num: 1 },
    { name: 'account1', code: 'account1', role: 'user', num: 1 },
    { name: 'account2', code: 'account2', role: 'user', num: 1 },
    { name: 'account3', code: 'account3', role: 'user', num: 1 },
  ];
  const generateData = () => {
    const data = [];
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
      });
    }
    return data;
  };

  const data1 = ref(generateData());
  const value1 = ref([]);
  const defaultProps = {
    children: 'children',
    label: 'label',
  };
  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped>
  .allocation-wrap {
    height: 100%;
    .top {
      display: flex;
      .number-box {
        font-size: 15px;
        width: 235px;
        padding: 5px 0 5px 15px;
        border: 1px solid #f1f1f1;
        height: 50px;
        display: flex;
        margin-left: 10px;
      }
      .icon-wrapper {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #bbc3ca;
        border: 2px solid #bbc3ca;
        border-radius: 100%;
        margin-right: 10px;
        font-size: 37px;
      }
    }
    .number-right {
      p:nth-child(1) {
        color: #cacaca;
        font-size: 13px;
      }
    }
  }
  .Content {
    height: calc(100% - 50px);
    .idea-box {
      height: calc(100% - 24px);
      display: flex;
    }
    .left-idea {
      width: 250px;
      border: 1px solid #ebeef5;
      display: flex;
      flex-direction: column;
    }
    .right-idea {
      width: calc(100% - 250px);
      :deep(.card) {
        padding: 0;
      }
    }
    .idea-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      padding-bottom: 10px;
      .el-button {
        width: 150px;
        margin-left: 0 !important;
        margin-top: 15px;
      }
    }
    .reset-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .mainContent {
    display: flex;
    .tree-wrapper {
      border: 1px solid #ebeef5;
      width: 290px;
      height: 318px;
    }
    :deep(.el-transfer-panel .el-transfer-panel__header) {
      border-top-left-radius: 0;
      background: #fff;
      border-top-right-radius: 0;
    }
    :deep(.el-transfer__buttons) {
      padding: 0 5px;
    }
    :deep(.el-transfer-panel) {
      width: 250px;
    }
  }
</style>
