<script setup lang="ts">
import type { Label } from '../types'
import { UserFilled } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
import { getNameByValue, updateStatusRuleList, updateStatusList, labelList } from '@/utils/dictionary'
import { getLabelStatistics, updateLabelStatistics, getLabelMembers } from '../api'
import { ElMessage } from 'element-plus'
import AppList from '@/components/base/AppList.vue'

const props = defineProps<{
  data: Label
}>()

const statusList = useMapStore().getMapValuesByKey('system_status')
const genderList = useMapStore().getMapValuesByKey('system_gender')
const connectionTypeList = useMapStore().getMapValuesByKey('experiment_connection_type')

const detail = reactive({ count: 0, status: '1', updated_time: '-' })
function fetchInfo() {
  getLabelStatistics({ id: props.data.id }).then(res => {
    Object.assign(detail, res.data.detail)
  })
}
watchEffect(() => fetchInfo())

function handleUpdate() {
  updateLabelStatistics({ id: props.data.id }).then(() => {
    ElMessage({ type: 'success', message: '更新成功' })
    fetchInfo()
  })
}

const appList = ref<InstanceType<typeof AppList> | null>(null)
// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getLabelMembers,
      params: { tag_id: props.data.id }
    },
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '用户ID', prop: 'id' },
      { label: '姓名', prop: 'name' },
      {
        label: '性别',
        prop: 'gender',
        computed({ row }: { row: any }) {
          return getNameByValue(row.gender, genderList)
        }
      },
      { label: '手机号码', prop: 'mobile' },
      {
        label: '来源连接',
        prop: 'experiment_connection_id',
        computed({ row }: { row: any }) {
          return getNameByValue(row.connection.type.toString(), connectionTypeList)
        }
      },
      {
        label: '状态',
        prop: 'status',
        computed({ row }: { row: any }) {
          return getNameByValue(row.status, statusList)
        }
      },
      { label: '更新人', prop: 'updated_operator.real_name' },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x' }
    ]
  }
})
</script>

<template>
  <el-dialog title="查看标签信息" width="1000px">
    <el-form label-suffix="：" label-width="82px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="标签名称">{{ data.name }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标签类型">{{ getNameByValue(data.label, labelList) }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="更新频率">{{ getNameByValue(data.update_status, updateStatusRuleList) }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <span :style="`color:${data.status === '1' ? 'var(--main-success-color)' : 'var(--main-color)'}`">
              {{ getNameByValue(data.status, statusList) }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-card>
      <div class="label-box">
        <dl>
          <dt>符合标签人数</dt>
          <dd class="label-box__count">
            <el-icon><UserFilled></UserFilled></el-icon>
            <span>{{ detail.count }}人</span>
          </dd>
        </dl>
        <dl>
          <dt>最后更新时间</dt>
          <dd>{{ detail.updated_time }}</dd>
        </dl>
        <dl>
          <dt>更新状态</dt>
          <dd>
            <span style="margin-right: 10px">{{ getNameByValue(detail.status, updateStatusList) }}</span>
            <el-button type="primary" plain @click="handleUpdate" size="small" :disabled="['2', '4'].includes(detail.status)">立即更新</el-button>
          </dd>
        </dl>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <template #header>标签用户</template>
      <AppList v-bind="listOptions" ref="appList">
        <template #table-x="{ row }">
          <el-button type="primary" plain>
            <router-link target="_blank" :to="{ path: '/user/image', query: { user_id: row.id, experiment_id: row.experiment_id } }">查看</router-link>
          </el-button>
        </template>
      </AppList>
    </el-card>
    <template #footer>
      <el-row justify="center">
        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.label-box {
  display: flex;
  justify-content: space-between;
  dt {
    margin-bottom: 10px;
    text-align: center;
  }
  dd {
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      padding: 0 5px;
    }
  }
}
.label-box__count {
  font-weight: bold;
  color: var(--main-color);
}
</style>
