<template>
  <div class="container-wrapper">
    <div class="top">
      <el-tabs v-model="current_tab" @tab-click="change_tab">
        <el-tab-pane style="font-size: 30px"
                     v-for="(tab, index) in tabs"
                     :key="index"
                     :label="tab.label"
                     :name="tab.name"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="tip">
      <div class="search_input">
        <el-input v-model="search_keyword" placeholder="名称/编号" :suffix-icon="Search" size="large" clearable
                  @change="change_search"/>

      </div>
      <div class="search_btn">
        <div class="default-btn" @click="change_search">
          <span class="iconfont icon-RectangleCopy"></span>
          搜索
        </div>
      </div>
      <div class="middel">
      </div>
      <div class="op_btn">
        <el-dropdown placement="bottom">
          <div class="default-btn">目录更新</div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="start_type">基础更新</el-dropdown-item>
              <el-dropdown-item @click="openUpdateBox(1312)">有效期更新</el-dropdown-item>
              <el-dropdown-item @click="openUpdateBox(1318)">限价信息更新</el-dropdown-item>
              <el-dropdown-item @click="openUpdateBox(1319)">自付比例更新</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="content" ref="content">
      <el-table :data="tableData" v-loading="isDownLoading" style="width: 100%" height="100%">
        <el-table-column v-for="(column, index) in column_list" show-overflow-tooltip :fixed="index < 2 ? 'left' : null"
                         :prop="column['en']" :label="column['zh']" :width="column['column_width']"/>
      </el-table>
    </div>
    <div class="bottom">
      <div class="page_btn_list">
        <el-pagination background layout="prev, pager, next" :page-count="total_page"
                       v-model:current-page="current_page" @current-change="change_page"/>
      </div>
    </div>
    <Mask :is-show="UpdateDirectoryLoading" :width="540" :height="160+24+24+60" title="更新版本" @close="close">
      <div style="height:100%;padding: 24px">
        <div class="updateDirectory">
          <div class="updateDirectory-message">{{ tip_message }}</div>
          <div class="demo-progress">
            <el-progress :percentage="100" :stroke-width="30" striped
                         striped-flow :show-text="false"/>
          </div>
        </div>
      </div>
    </Mask>
    <Mask :is-show="isUpdate1312" :width="540" :height="347" title="有效期更新" @close="close">
      <div class="content-new">
        <div class="update_box">
          <el-date-picker
              v-model="updt_time"
              type="date"
              placeholder="选择一个起始日期"
              size="default"
              style="flex: 1;height: 100%"
          />
          <div class="default-btn startBtn" @click="update1312(1)"
               :style="{background: showBtn ? '#EDEFF6' : '', color: showBtn ? '#333333' : ''}">
            开始更新
          </div>
        </div>
        <div class="tip-body">
          <div class="tip">
            <div class="tip-title">
              {{ tip }}
            </div>
            <div class="demo-progress">
              <el-progress v-if="tip" :stroke-width="30" :percentage="percent"
              />
            </div>
          </div>
        </div>
      </div>
    </Mask>
    <Mask :is-show="isUpdate1318" :width="540" :height="347" title="限价信息更新" @close="close">
      <div class="content-new">
        <div class="update_box">
          <el-date-picker
              v-model="updt_time"
              type="date"
              placeholder="选择一个起始日期"
              size="default"
              style="flex: 1;height: 100%"
          />
          <div class="default-btn startBtn" @click="update1318(1)"
               :style="{background: showBtn ? '#EDEFF6' : '', color: showBtn ? '#333333' : ''}"
          >
            开始更新
          </div>
        </div>
        <div class="tip-body">
          <div class="tip">
            <div class="tip-title">
              {{ tip }}
            </div>
            <div class="demo-progress">
              <el-progress v-if="tip" :text-inside="true" :stroke-width="30" :percentage="percent"/>
            </div>
          </div>
        </div>
      </div>
    </Mask>
    <Mask :is-show="isUpdate1319" :width="540" :height="347" title="自付比例更新" @close="close">
      <div class="content-new">
        <div class="update_box">
          <el-date-picker
              v-model="updt_time"
              type="date"
              placeholder="选择一个起始日期"
              size="default"
              style="flex: 1;height: 100%"
          />
          <div class="default-btn startBtn" @click="update1319(1)"
               :style="{background: showBtn ? '#EDEFF6' : '', color: showBtn ? '#333333' : ''}">
            开始更新
          </div>
        </div>
        <div class="tip-body">
          <div class="tip">
            <div class="tip-title">
              {{ tip }}
            </div>
            <div class="demo-progress">
              <el-progress v-if="tip" :text-inside="true" :stroke-width="30" :percentage="percent"/>
            </div>
          </div>
        </div>
      </div>
    </Mask>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, watch, nextTick} from 'vue';
import {ElNotification, type TabsPaneContext} from 'element-plus'
import {post} from '@/utils/request.ts'
import {Search} from '@element-plus/icons-vue'
import Mask from "@/components/common/Mask.vue";

let isUpdate1312 = ref(false)
let isUpdate1318 = ref(false)
let isUpdate1319 = ref(false)
let updt_time = ref(new Date())
let current_page = ref(1);
let total_page = ref(0)
let current_tab = ref(1301);
let column_list = ref([]);
let search_keyword = ref("");
let isDownLoading = ref(false);
let tip = ref("")
const tabs = [
  {label: '中西成药', name: 1301},
  {label: '中药饮片', name: 1302},
  {label: '医疗项目', name: 1305},
  {label: '医疗耗材', name: 1306},
  {label: '疾病诊断', name: 1307},
  {label: '慢特病种', name: 1309},
  {label: '中医疾病', name: 1314},
  {label: '中医证候', name: 1315},
  {label: '中药配方颗粒', name: 1320},
  {label: 'ICPC诊断项目', name: 1361},
  {label: 'ICPC服务项目', name: 1362},
];
let tableData: any = ref([])
let content: any = ref(null);
const showBtn = ref(false)
const percent = ref(0)
const percentage = ref<any>(0)
let update1312 = (current_page: number) => {
  showBtn.value = true
  if (current_page == 1) {
    tip.value = "开始更新第1页"
  }
  post("social/directory_upinfo/get_page", {
    updt_time: updt_time.value,
    page: current_page
  }, {catch_error: true}).then((res: any) => {
    let pages = res.pages;
    let number = res.number;
    if (current_page < pages && isUpdate1312.value) {
      current_page++
      percent.value = Math.floor((current_page / pages) * 10000)
      tip.value = "开始更新第:" + current_page + "/" + pages;
      update1312(current_page);
    } else {
      tip.value = "所有更新已完成"
      close()
    }

  }).catch((err: any) => {
    close()
  })
}
const openUpdateBox = (type: number) => {
  //获取30天前时间
  let start_time = new Date();
  start_time.setDate(start_time.getDate() - 30);
  updt_time.value = start_time;
  if (type == 1312) {
    isUpdate1312.value = true
  }
  if (type == 1318) {
    isUpdate1318.value = true
  }
  if (type == 1319) {
    isUpdate1319.value = true
  }

}
onMounted(() => {
  init()
});
let change_search = () => {
  init()
}

function init() {
  current_page.value = 1;
  set_tab()
}

function set_tab() {
  post("social/directory/column_list", {type: current_tab.value})
      .then((res: any) => {
        column_list.value = res;
        get_data_list();
      })
}

function get_data_list() {
  isDownLoading.value = true;
  let content_height = content.value.clientHeight;
  let rows = Math.floor(content_height / 40);
  post("social/directory/get_doc_list", {
    type: current_tab.value,
    page: current_page.value,
    size: 30,
    search_keyword: search_keyword.value
  }).then((res: any) => {
    isDownLoading.value = false;
    total_page.value = res.total_page;
    tableData.value = res.list
    tableData.value.forEach((item: any) => {
      if (item.enddate == null) {
        item.enddate = "长期有效"
      }
      if (item.json?.rx_flag) {
        item.json.rx_flag = item.json.rx_flag == 1 ? "是" : "否"
      }
    })
  })
}

let change_page = (val: number) => {
  get_data_list()
}
let change_tab = (tab: TabsPaneContext, event: Event) => {
  search_keyword.value = "";
  nextTick(() => {
    init()
  })
}
let UpdateDirectoryLoading = ref(false)

const tip_message = ref("正在更新目录，请稍后...")
const start_type = () => {
  UpdateDirectoryLoading.value = true
  post("social/directory_version/get_current", {type: current_tab.value}, {catch_error: true}).then((res: any) => {
    tip_message.value = "正在更新目录，上一个版本:" + res.currentVersionName + ",请不要强制关闭程序，否则数据不完整";
    download(res.currentVersionName, current_tab.value);
  }).catch((err: any) => {
    UpdateDirectoryLoading.value = false;
    ElNotification({
      title: '提示',
      message: "当前是最新版本",
      type: 'success',
    })
  })
}
let download = (ver: any, type: any) => {
  post("social/directory/download", {ver: ver, type: type}).then((res: any) => {
    if (res == null || res == "") {
      UpdateDirectoryLoading.value = false;
      ElNotification({
        title: '提示',
        message: "当前是最新版本",
        type: 'success',
      })
      return
    }
    get_data_list()
    start_type()
  }).catch((err: any) => {
    UpdateDirectoryLoading.value = false;
    ElNotification({
      title: '提示',
      message: "当前是最新版本",
      type: 'success',
    })
  })
}
const close = () => {
  showBtn.value = false
  UpdateDirectoryLoading.value = false;
  isUpdate1312.value = false
  isUpdate1318.value = false
  isUpdate1319.value = false
  tip.value = ""
  percent.value = 100
}
const update1318 = (current_page: number) => {
  showBtn.value = true
  if (current_page == 1) {
    tip.value = "开始更新第1页"
  }
  post('social/directory_limit/get_page', {
    updt_time: updt_time.value,
    page: current_page
  }).then((res: any) => {
    let pages = res.pages;
    let number = res.number;
    if (current_page < pages && isUpdate1318.value) {
      current_page++
      percent.value = Math.floor((current_page / pages) * 10000)
      tip.value = "开始更新第:" + current_page + "/" + pages;
      update1318(current_page);
    } else {
      tip.value = "所有更新已完成"
      close()
    }
  })
}
const update1319 = (current_page: number) => {
  showBtn.value = true
  if (current_page == 1) {
    tip.value = "开始更新第1页"
  }
  post('social/directory_self/get_page', {
    updt_time: updt_time.value,
    page: current_page
  }).then((res: any) => {
    let pages = res.pages;
    let number = res.number;
    if (current_page < pages && isUpdate1319.value) {
      current_page++
      percent.value = Math.floor((current_page / pages) * 10000)
      tip.value = "开始更新第:" + current_page + "/" + pages;
      update1318(current_page);
    } else {
      tip.value = "所有更新已完成"
      close()
    }
  })
}
</script>

<style scoped lang="scss">
.container-wrapper {
  box-sizing: border-box;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;


  .top {
    width: 100%;
    height: 50px;

    :deep(.el-tabs__item) {
      font-size: 16px;
    }
  }

  .tip {
    display: flex;

    .search_input {
      flex: 1;
    }

    .search_btn {
      width: 140px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .middel {
      width: 200px;
    }

    .op_btn {
      width: 120px;
    }

  }

  .content {
    width: 100%;
    flex: 1;
    overflow: hidden;
  }

  .bottom {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    border-top: 1px solid #EEE;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .download_btn {
      position: absolute;
      right: 0;
      top: 10px;
    }
  }

}

.content-new {
  height: 100%;
  display: flex;
  flex-direction: column;

  .update_box {
    width: 100%;
    height: 90px;
    padding: 24px;
    display: flex;
    justify-content: space-between;

    .startBtn {
      height: 100%;
      margin-left: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .tip-body {
    flex: 1;
    padding: 0 24px 24px;
    min-height: 0;

    .tip {
      width: 100%;
      height: 100%;
      background: #F9FAFC;
      border-radius: 8px;
      font-weight: 500;
      font-size: 16px;
      color: #999999;
      font-style: normal;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px;
    }
  }
}


.updateDirectory {
  height: 100%;
  padding: 24px;
  background: #F9FAFC;
  font-weight: 500;
  font-size: 16px;
  color: #999999;
  font-style: normal;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &-message {
    margin-bottom: 24px;
  }
}
</style>