<template>
  <my-drawer
    class="sop-dialog"
    :visible="visible"
    size="80%"
    header="调配详情"
    attach="body"
    :close-btn="true"
    @close="emit('update:visible', false)"
  >
    <div class="sop-step">
      <t-collapse class="sop-step-mid" defaultExpandAll>
        <t-collapse-panel disabled>
          <template #expandIcon></template>
          <template #header> 基础信息 </template>
          <t-form :labelWidth="66" colon>
            <t-row :gutter="[20, 0]">
              <t-col :span="6">
                <t-form-item label="服务单元"
                  >{{ curRow.serviceUnitName }}
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="项目单号">{{ curRow.crmNo }} </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="客户类型"
                  >{{ customerTypeFilter(curRow.customType) }}
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="客户名称"
                  >{{ curRow.customName }}
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="服务档位">{{ curRow.level }} </t-form-item>
              </t-col>
              <t-col :span="12">
                <t-form-item label="客户地址">
                  <t-space>
                    <span>{{ curRow.province }}</span>
                    <span>{{ curRow.city }}</span>
                    <span>{{ curRow.area }}</span>
                    <span>{{ curRow.address }}</span>
                  </t-space>
                </t-form-item>
              </t-col>
            </t-row>
          </t-form>
        </t-collapse-panel>
      </t-collapse>
      <div class="sop-step-content">
        <h3>人员调配</h3>
        <t-form label-width="110px">
          <t-form-item label="区域协调人">
            <!-- <t-radio v-model="curRow.ss" disabled>由大区经理兼任</t-radio> -->
            <t-radio :checked="!!curRow.concurrently" disabled
              >由大区经理兼任</t-radio
            >
          </t-form-item>
        </t-form>
        <div class="deploy-list">
          <div
            v-for="item in roleConfigInfo"
            :key="item.roleId"
            class="deploy-item"
          >
            <div class="deploy-label">
              <t-tag size="large">{{ item.roleName }}</t-tag>
            </div>
            <div class="deploy-content">
              <t-space>
                <t-tag v-for="user in item.userList" :key="user.userId">
                  {{
                    `${user.archiverName}_${user.supplierName}_${user.archivesCity}`
                  }}
                </t-tag>
              </t-space>
            </div>
          </div>
        </div>
        <h3 class="m-t-24px">发布状态</h3>
        <t-space :size="40">
          <div>
            SOP发布：
            <status-tag :value="curRow.crmStatus" type="crmStatus"></status-tag>
          </div>
        </t-space>
      </div>
    </div>

    <template #foot>
      <t-button theme="primary" @click="emit('update:visible', false)"
        >返回</t-button
      >
    </template>
  </my-drawer>
</template>
<script setup name="DeployDetailDialog">
import { ref, watch, computed } from 'vue';
import { personAllocateRoleDetailApi } from '@/api/resource-guard';
import { customerTypeFilter } from '@/utils/filter';

const emit = defineEmits(['update:visible', 'success']);
const props = defineProps({
  visible: Boolean,
  curRow: Object,
});
let roleConfigInfo = ref([]);

const getDetail = async () => {
  const res = await personAllocateRoleDetailApi(props.curRow.crmNo).catch(
    () => {}
  );
  if (!res) return;

  const roleQuota = {
    REGION_COORDINATOR: props.curRow.coordinatorQuota,
    EFFECT_ENGINEER: props.curRow.effectQuota,
    ASSISTANT_ENGINEER: props.curRow.assistantQuota,
  };

  if (res.length) {
    let roleConfigMap = {};

    res.forEach((item) => {
      if (!roleConfigMap[item.roleResult.roleId]) {
        roleConfigMap[item.roleResult.roleId] = {
          quota: roleQuota[item.roleResult.roleType],
          userList: [],
          ...item.roleResult,
        };
      }
      roleConfigMap[item.roleResult.roleId].userList.push(item);
    });
    roleConfigInfo.value = Object.values(roleConfigMap);
  } else {
    roleConfigInfo.value = [];
  }
};
const isByManage = computed(() => {
  let arr = roleConfigInfo.value || [];
  console.log('arr', arr);
  let find = arr.find(
    (item) =>
      !!(item.userList || []).find(
        (v) =>
          v.roleResult.roleType === 'REGION_COORDINATOR' &&
          v.userId == props.curRow.regionManagerId
      )
  );
  console.log('find', find);
  return !!find;
});
watch(
  () => props.visible,
  (val) => {
    if (val) getDetail();
  }
);
</script>

<style lang="less" scoped>
.deploy-list {
  .deploy-item {
    margin: 16px 0;
    display: flex;
  }
  .deploy-label {
    flex-grow: 0;
    flex-shrink: 0;
    width: 110px;
    margin-right: 8px;
    .t-tag {
      width: 100%;
    }
  }
  .deploy-content {
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    padding: 4px;
    min-height: 32px;
    min-width: 300px;
  }
}
</style>
