<template>
  <div class="app-container">
    <div class="statisticEle">
      <el-card class="statistic-card">
        <el-row>
          <el-col :span="6">
            <el-statistic title="待随访池" :value="`${reportInfo.sfPool || 0}个任务`" />
            <el-link type="primary" v-if="reportInfo.sfPool > 0" @click="showDialog">领取</el-link>
          </el-col>
          <el-col :span="6">
            <el-statistic title="我的待随访" :value="`${reportInfo.need || 0}个任务`" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="本周随访平均通话时长/秒" :value="`${reportInfo.callDuration || 0}秒`" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="本周完成随访数" :value="`${reportInfo.complete || 0}个任务`" />
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="page-search">
      <div class="pos-icon">
        <el-icon v-if="iconFlag" @click="iconHandle">
          <ArrowRight />
        </el-icon>
        <el-icon v-if="!iconFlag" @click="iconHandle">
          <ArrowDown />
        </el-icon>
      </div>
      <div class="search-header">
        <div class="search-title">任务列表</div>
        <div class="search-form">
          <el-radio-group v-model="searchState" @change="search">
            <el-radio-button label="全部" value="0" />
            <el-radio-button label="待随访" value="1" />
            <el-radio-button label="已随访" value="3" />
            <el-radio-button label="随访池" value="4" />
            <!-- <el-radio-button label="异常随访" value="4" /> -->
          </el-radio-group>
          <el-input v-model="searchParams.key" style="width: 240px; margin-top: 6px; margin-left: 15px;"
            placeholder="请输入患者姓名全称或完整手机号" :suffix-icon="Search" @blur="search" />
        </div>
      </div>
      <div class="serach-bottom" v-if="!iconFlag">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="计划">
              <!-- <el-select v-model="searchParams.name" filterable remote reserve-keyword placeholder="请输入计划名称"
                :remote-method="remoteMethod" :loading="loading" style="width: 240px" @change="search" clearable>
                <el-option v-for="item in planOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select> -->
              <el-input v-model="searchParams.plName" style="width: 240px; margin-top: 6px; margin-left: 15px;"
            placeholder="请输入计划名称"  @blur="search" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="任务时间">
              <el-date-picker v-model="form.date1" type="daterange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="要求时间">
              <el-date-picker v-model="form.date2" type="daterange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="6">
            <el-form-item label="随访方式">
              <el-select v-model="searchParams.way" placeholder="请选择随访方式" clearable @change="search">
                <el-option label="电话" value="1" />
                <el-option label="短信" value="2" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="呼叫结果">
              <el-select v-model="searchParams.callState" placeholder="请选择呼叫结果" clearable @change="search">
                <el-option v-for="item in taskResults" :key="item.value" :label="item.title" :value="item.title" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="searchParams.labelValue" placeholder="请选择随访标签" clearable @change="search">
                <el-option v-for="item in resultLabels" :key="item.value" :label="item.title" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


      </div>
    </div>

    <div class="page-content">
      <table style="width: 100%;" v-if="taskList && taskList.length > 0">
        <tr class="conteent-list" :key="index" v-for="(item, index) in taskList">
          <td class="list-item" style="width: 45px;">
            <div class="item-name">{{ item.name }}</div>
          </td>
          <td class="list-item">
            <div>
              <!-- <el-icon color="#409efc" style="margin-right: 8px;" @click="viewPhoneHandle(item.mobile,index)"><View /></el-icon> -->
              <span style="color: #000; margin-right: 10px;">{{ userDecryptToAsterisk(item.mobile) }}</span>
              <!-- <el-icon v-if="item.way === 2">
                <Message />
              </el-icon> -->
              <el-icon :size="16" class="iconSvg" v-if="item.plan.way === 2" @click="">
                <svg t="1715745341996" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="1521" width="200" height="200">
                  <path
                    d="M958.359001 286.941198c0-64.308655-52.132334-116.440989-116.440989-116.440989L181.453678 170.500209c-64.308655 0-116.440989 52.132334-116.440989 116.440989l0 448.63995c0 64.308655 52.132334 116.440989 116.440989 116.440989l660.464333 0c64.308655 0 116.440989-52.132334 116.440989-116.440989L958.359001 286.941198zM843.814198 212.455763c12.059664 0 23.444968 3.465938 33.519418 8.598842L530.749016 549.347606c-1.227967 1.161453-1.156336 0.916882-1.752924 1.868557-1.426489 1.067308-6.055926 3.922333-15.449877 3.922333-9.397021 0-14.025435-2.75474-15.4509-3.818979-0.676405-1.077541-0.662079-0.716314-1.995447-1.940189l-353.122503-324.412624c11.609409-7.557116 25.445532-12.509918 40.300868-12.509918L843.814198 212.456786zM916.403446 736.484727c0 40.857547-31.730679 73.582879-72.589248 73.582879L183.27721 810.067606c-40.85857 0-75.28566-32.725332-75.28566-73.582879L107.99155 287.657512c0-10.630105 2.860141-20.735253 6.909363-29.882588l351.486236 322.096882c4.91187 5.302773 19.479657 17.676591 47.009663 17.676591 27.799136 0 42.303478-12.618389 47.076178-17.830087l346.800517-328.899822c6.251378 10.860349 9.129938 23.433712 9.129938 36.838L916.403446 736.484727z"
                    fill="#409EFF" p-id="1522"></path>
                </svg>
              </el-icon>
              <el-icon :size="16" class="iconSvg" v-if="item.plan.way === 1">
                <svg t="1715745589137" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2948" id="mx_n_1715745589138" width="200" height="200">
                  <path
                    d="M769.862 615.478c-66.283 0-122.861 41.538-145.134 100.001-0.061-0.027 0.062 0.026 0 0-0.218 0.63-0.581 1.192-1.034 1.734-1.499 1.791-4.016 2.427-6.117 1.782-0.004 0.018 0.004-0.018 0 0-144.708-53.388-259.461-168.521-312.34-313.474-0.147-0.495-0.252-1.007-0.252-1.549 0-2.335 1.406-4.365 3.431-5.219-0.005-0.009 0.005 0.009 0 0C367.393 376.741 409.4 319.915 409.4 253.262 409.4 167.513 339.887 98 254.138 98S98.876 167.513 98.876 253.262c0 0.54 0.015 1.077 0.02 1.616C114.082 618.719 406.159 910.815 770 926c85.685-0.075 155.124-69.557 155.124-155.26 0-85.749-69.513-155.262-155.262-155.262z"
                    fill="#409EFF" p-id="2949"></path>
                </svg> </el-icon>
              <el-icon :size="16" class="iconSvg" v-if="item.plan.executionMethod === 2">
                <svg t="1715743598290" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                  p-id="7691" width="200" height="200">
                  <path
                    d="M981.333333 618.666667h-106.666666v-21.333334a298.666667 298.666667 0 0 0-118.186667-244.053333l103.893333-162.986667a64 64 0 1 0-36.053333-23.04l-103.04 162.133334A416.213333 416.213333 0 0 0 512 277.333333a416.213333 416.213333 0 0 0-209.28 52.053334l-103.04-162.133334a64 64 0 1 0-36.053333 23.04l103.893333 162.986667A298.666667 298.666667 0 0 0 149.333333 597.333333v21.333334H42.666667v256h106.666666v85.333333h725.333334v-85.333333h106.666666zM85.333333 832v-170.666667h64v170.666667z m746.666667 85.333333H192V597.333333c0-192 160.64-277.333333 320-277.333333s320 85.333333 320 277.333333v320z m106.666667-85.333333h-64v-170.666667h64z"
                    p-id="7692" fill="#409EFF"></path>
                  <path
                    d="M405.333333 661.333333m-42.666666 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
                    p-id="7693" fill="#409EFF"></path>
                  <path
                    d="M618.666667 661.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
                    p-id="7694" fill="#409EFF"></path>
                  <path
                    d="M661.333333 533.333333H362.666667a128 128 0 0 0 0 256h298.666666a128 128 0 0 0 0-256z m0 213.333334H362.666667a85.333333 85.333333 0 0 1 0-170.666667h298.666666a85.333333 85.333333 0 0 1 0 170.666667z"
                    p-id="7695" fill="#409EFF"></path>
                </svg>
              </el-icon>

            </div>
            <div>{{ item.plan.name }}</div>
          </td>
          <td class="list-item">
            <div>任务时间</div>
            <div>{{ item.collectionTime || '-' }}</div>
          </td>
          <td class="list-item">
            <div>要求时间</div>
            <div style="color: #F56C6C;" v-if="item.askTime && new Date(item.askTime) < new Date()">{{ item.askTime }}
            </div>
            <div v-else-if="item.askTime && new Date(item.askTime) >= new Date()">{{ item.askTime }}</div>
            <div v-else>-</div>
          </td>
          <td class="list-item">
            <div>最近就诊科室：{{ item.jzks || '-' }}</div>
            <div>最近诊断：{{ item.zdjb || '-' }}</div>
          </td>
          <td class="list-item">
            <div>随访次数：{{ item.sfNumber || 0 }}</div>
            <div>住院次数：{{ item.hospitalNumber || 0 }}</div>
          </td>
          <td class="list-item">
            <div>入院：{{ item.rysj || '-' }}</div>
            <div>出院：{{ item.cysj || '-' }}</div>
          </td>
          <td class="list-item">
            <div>主管医生：{{ item.zzys || '-' }}</div>
            <div>转归情况：<span :style="{ 'color': getZhuanguiStatus(item.zgqk) }">{{ item.zgqk || '-' }}</span></div>
          </td>
          <td class="list-item">
            <div>随访人员</div>
            <div>{{ item.seatName ? item.seatName : '-' }}</div>
          </td>
          <td class="list-item">
            <div class="item-dot" :style="[{ 'background': taskResultsMap[item.callState || ''].color }]"></div>
            <div class="item-state">{{ taskResultsMap[item.callState || ''].title }}</div>
          </td>
          <td class="list-item">
            
            <el-button type="primary" link @click="handleDetail(item)" v-if="item.state === 1">随访</el-button>
            <el-button v-else link @click="handleDetail(item)" >查看</el-button>
            
          </td>
        </tr>
      </table>
      <div v-else>
        <template>
          <el-empty description="暂无数据" />
        </template>
      </div>
    </div>
    <div class="page-pagination" v-if="pageTotal > 0">
      <el-pagination style="float: right;" v-model:current-page="currentPage" :page-size="pageSize"
        layout="total, prev, pager, next" :total="pageTotal" @current-change="getTaskList" />
    </div>

    <!-- 领取弹框 -->
    <el-dialog v-model="getDialogShow" title="领取" width="750">
      <el-table :data="planList">
        <el-table-column property="name" label="计划名称" width="250" />
        <el-table-column property="number" label="待随访数量" width="150" />
        <el-table-column property="getNum" label="抽取数量">
          <template #default="scope">
            <el-input-number v-model="scope.row.num" style="width: 130px;" :min="1" :max="scope.row.number" />
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.row)">
              领取
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { getTasks, getSelfTaskReport } from  '@/api/patient/task'
import { getPlans } from  '@/api/patient/plan'
import { taskResults } from "@/utils/commonDic.js"
import { ArrayToMap } from '@/utils/tools'
import { getZhuanguiStatus } from '@/utils/index'
import { getPageListData, editPageData } from '@/api/main/system/system';
import { userDecryptToAsterisk,userToAsterisk } from '@/utils/aes'
import useSelectStore from '@/store/commonSelect/common';
import { ElMessage } from 'element-plus'
const router = useRouter();
const loading = ref(false)
const planOptions = ref([])
// const activeNames = ref(['1'])
// const input2 = ref('')
const iconFlag = ref(true)
const resultLabels = ref([]);
// const form = ref({
//   name: '',
//   date1: '',
//   date2: '',
//   delivery: '',
//   resource: '',
// })
const getDialogShow = ref(false);
const planList = ref([]);

const showDialog = () => {
  getPlanNumbers();
  getDialogShow.value = true;
}

const getPlanNumbers = () => {
  getPageListData('/SfPlanPatient/sfplanpatient/selectToBeFollowedUp', {

  }).then(res => {
    planList.value = res.data
  })
}

function viewPhoneHandle(mobile,index) {
  taskList.value[index].mobile = userToAsterisk(mobile) 
}

const handleClick = (record) => {
  console.log(record, 'record')
  if (!record.num) {
    ElMessage({
        message: '请输入数量',
        type: 'error',
      })
      return;
  }
  editPageData(`/SfPlanPatient/sfplanpatient/Extract/${record.id}`, {
    number: record.num,
  }).then(res => {
    console.log(res, 'res')
    if (res.state === 'success') {
      ElMessage({
        message: res.message,
        type: 'success',
      })
      getTaskList(1);
      getReport();
    } else {
      ElMessage({
        message: res.message,
        type: 'error',
      })
    }
  })
}

// 跳转到患者详情
function handleDetail(row) {
    
    router.push({
      path: '/followUp/taskDetails',
      query: {
        id: row.patientTaskId, // 任务编号
        patientId: row.patientFiles, // 患者档案编号
        planId: row.plId,
      }
    });
  }
function iconHandle() {
  console.log("点击")
  iconFlag.value = !iconFlag.value
}
const currentPage = ref(1)
const pageSize = ref(6)
const pageTotal = ref(0)
const taskList = ref([])
const searchState = ref('1')
const searchParams = ref({
  state: '1', // 状态
  tel: '',  // 姓名或手机号
  way: '',  // 随访方式
  callState: '',
  plId: null,
  plName: '',
  labelValue: '',
});

const search = () => {

  console.log(searchParams.value, 'radio1')
  if(searchState.value == 4){
    searchParams.value.allYsf = 1;
    delete searchParams.value.state
  }else{
    searchParams.value.allYsf = 0 
    searchParams.value.state = searchState.value
  }
  getTaskList(1);
}

const getTaskList = async (page) => {
  if (page) currentPage.value = page
  let params = {
    display:1,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    ...searchParams.value,
  }
  if(searchState.value == 4){
    params.display = 0;
  }
  const result = await getTasks(params);
  if (result.state === 'success') {
    pageTotal.value = result.total || 0
    taskList.value = result.data || []
  }

}

const reportInfo = ref({});



onMounted(async () => {
  resultLabels.value = useSelectStore().resultLabels;
  getTaskList();

  getReport();
})

const getReport = () => {
  // 获取统计信息
  getSelfTaskReport().then((res) => {
    if (res.state === 'success') {
      reportInfo.value = res.data;
    }
  })
}


const taskResultsMap = ArrayToMap(taskResults, 'value');

const remoteMethod = (query) => {
  if (query) {
    loading.value = true

    getPlans({
      name: query,
      pageNum: 1,
      pageSize: 10,
    }).then((res) => {
      loading.value = false
      if (res.state === 'success') {
        let options = [];
        res.data.map((o) => {
          options.push({
            label: o.name,
            value: o.plId
          })
        })

        planOptions.value = options
        // planOptions.value = res.data.map((o) => return {
        //   label: o.name,
        //   value: o.plId
        // })
      }
    })

    // setTimeout(() => {
    //   loading.value = false
    //   options.value = list.value.filter((item) => {
    //     return item.label.toLowerCase().includes(query.toLowerCase())
    //   })
    // }, 200)
  } else {
    planOptions.value = []
  }
}

</script>
<style lang="scss" scoped>
.iconSvg{
  margin-left:8px ;
}
.statisticEle{
  text-align: center;
  margin-bottom: 15px;
  .statistic-card{
    padding: 30px 0px;
  }
}
.page-search{
  width: 100%;
  position: relative;
  padding: 15px;
  .pos-icon{
    position: absolute;
    right: 15px;
    top: 30px;
  }
  .search-header{
    display: flex;
    margin-right: 30px;
    .search-title{
      text-align: left;
      width: 100px;
      font-size: 18px;
      font-weight: bold;
    }
    .search-form{
      width: calc(100% - 100px);
      text-align: right;
    }
  }
  .serach-bottom{
    margin-top: 30px;
  }
}
.page-content{
  padding: 30px;
  .conteent-list{
    .list-item{
      margin-right: 30px;
      line-height: 26px;
      color: #909399;
      border-bottom: 1px solid #D4D7DE;
      padding: 15px;
      font-size: 14px;
      .item-name{
        width: 45px;
        height: 45px;
        font-size: 12px;
        line-height: 45px;
        text-align: center;
        border-radius: 50%;
        background-color: #79bbff;
        color:#ffffff;
      }
      .item-dot{
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .item-state{
        display: inline-block;
        margin-left: 10px;
      }
    }
  }
}
.page-pagination{
  overflow: hidden;
}
</style>