<template>
  <div>
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <span>方名：</span>
          <div class="input">
            <el-input v-model="name" size="mini" placeholder="请输入"></el-input>
          </div>
        </div>

        <div class="screening-item flex-vertical-center-l">
          <span>中医病名：</span>
          <el-select
            size="mini"
            v-model="medName"
            @change="cNameChange"
            placeholder="请选择"
            filterable
            remote
            :filter-method="filterMethod"
          >
            <el-option
              :label="item.disname"
              :value="item.disname"
              v-for="(item,index) in cmNameList"
              :key="index"
            ></el-option>
          </el-select>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>剂型：</span>
          <div class="input">
            <el-select size="mini" v-model="dosage" placeholder="请选择">
              <el-option
                :label="item.value"
                :value="item.key"
                v-for="(item,index) in dosageList"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </div>

        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="$router.push({path:'/index/experienceAdd'})"
          v-if="showAdd"
        >新增</el-button>
      </div>
    </div>

    <!-- 底部表格数据 -->
    <div class="table">
      <!-- <div class="flex-vertical-center-l table-btns"> -->
      <!-- <div class="flex-center" v-if="showAdd">新增</div> -->
      <!-- <div class="flex-center bg-yellow">导入</div>
      <div class="flex-center bg-red">自动映射</div>-->
      <!-- </div> -->

      <div class="today-table">
        <div class="table-container">
          <el-table :data="list" stripe style="width: 100%" border height="100%">
            <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="name" label="方名" align="center"></el-table-column>
            <el-table-column prop="diseasename" label="中医病名" align="center"></el-table-column>
            <el-table-column prop="symptomname" label="证型" align="center"></el-table-column>
            <el-table-column prop="expert" label="专家" align="center"></el-table-column>
            <el-table-column prop="isupdate" label="修改限制" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isupdate"
                  disabled
                  active-color="#5EC7B1"
                  inactive-color="#ff4949"
                ></el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <div class="flex-center operation">
                  <div
                    class="flex-center"
                    v-if="showEdit"
                    @click="$router.push({path:`/index/experienceAdd?pid=${scope.row.pid}&type=edit`})"
                  >修改</div>
                  <div
                    class="flex-center bg-yellow"
                    v-if="showDetail"
                    @click="$router.push({path:`/index/experienceAdd?pid=${scope.row.pid}&type=find`})"
                  >详情</div>
                  <div class="flex-center bg-red" v-if="showDelete" @click="deleteData(scope)">删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex-vertical-center-r today-page">
          <el-pagination
            background
            layout=" prev, pager, next, jumper, total"
            :total="total"
            :page-size="limit"
            @current-change="sizeC($event)"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getExperinceList, deleteExperince } from "@/api/business";
import {
  getCDiseaseName,
  getXDiseaseName,
  getCCardType
} from "@/api/knowledge.js";
import { getSelectType } from "@/api/city.js";
export default {
  data() {
    return {
      name: "", // 方明
      medName: "", // 中医病名
      medNameID: "", // 病名id
      dosage: "", // 剂型
      cmNameList: [],
      dosageList: [],
      medSelectList: [
        {
          name: "有病",
          pid: 2
        }
      ],

      showAdd: true,
      showEdit: true,
      showDetail: true,
      showDelete: true,

      total: 0,
      page: 1,
      limit: 10,
      list: []
    };
  },
  created() {
    this.getExperinceList();
    this.getSelectType("剂型", 0);
  },
  methods: {
    filterMethod(e) {
      let pinyin = /^[A-Za-z]+$/g;
      if (pinyin.test(e)) {
        this.getCDiseaseName(e, "1");
      } else {
        this.getCDiseaseName(e, "");
      }
    },
    cNameChange() {
      // let id = ''
      this.cmNameList.forEach(item => {
        if (item.disname == this.medName) {
          // id = item.disid
          this.medNameID = item.disid;
        }
      });
    },
    search() {
      this.page = 1;
      this.getExperinceList();
    },
    sizeC(e) {
      this.page = e;
      this.getExperinceList();
    },
    deleteData(scope) {
      this.$confirm("确定要删除当前数据吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteExperince(scope.row.pid);
        })
        .catch(() => {});
    },
    clearFilter() {
      this.name = "";
      this.medName = "";
      this.medNameID = "";
      this.dosage = "";
      this.page = 1;
      this.getExperinceList();
    },
    // 根据表格获取数据类型
    async getSelectType(data, index) {
      let res = await getSelectType(data);

      if (data == "中药药品用法") {
        if (this.totalTableD[index].usage) {
          res.Data.forEach(item => {
            if (!this.totalTableD[index]) return;
            if (item.value === this.totalTableD[index].usage) {
              this.totalTableD[index].usage = item.key;
            } else {
              this.totalTableD[index].usage = "";
            }
          });
        }
        this.totalTableD[index].usageList = res.Data;
      } else if (data == "剂型") {
        this.dosageList = res.Data;
      }
    },
    // 获取中医病名数据
    async getCDiseaseName(key, serchtype = "") {
      let params = {
        pageid: 1,
        pagesize: 9999,
        serchtype,
        keyword: key
      };
      let res = await getCDiseaseName(params);
      if (res.code == 0) {
        this.cmNameList = res.data.diseases;
      }
    },
    // 获取列表信息
    async getExperinceList() {
      let params = {
        name: this.name,
        diseaseid: this.medNameID,
        curetype: this.dosage,
        limit: 10,
        page: this.page
      };
      let res = await getExperinceList(params);
      if (res.ResultCode == 0) {
        res.Data.Items.filter((item, index) => {
          item.isupdate = item.isupdate == "0" ? true : false;

          if (this.page == 1) {
            return (item.id = index + 1);
          } else {
            return (item.id = this.page - 1 + String(index + 1));
          }
        });

        this.list = res.Data.Items;
        this.total = res.Data.TotalRecordCount;

        this.showEdit = res.Data.ButtonRight.indexOf("edit") != -1;
        this.showDetail = res.Data.ButtonRight.indexOf("view") != -1;
        this.showDelete = res.Data.ButtonRight.indexOf("del") != -1;
      }
    },
    // 删除专家经验数据
    async deleteExperince(id) {
      const loading = this.$loading({
        lock: true,
        text: "正在删除...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await deleteExperince({
        id
      }).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();

        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success"
        });

        this.getExperinceList();
      } else {
        this.$message({
          type: "error",
          message: res.ResultInfo,
          showClose: true
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.table {
  padding: 5px 5px;
  background: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
  height: 72vh;

  .table-btns {
    margin-bottom: 13px;

    div {
      width: 74px;
      height: 36px;
      background: #5386f6;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 7px;
    }

    .bg-yellow {
      background: #ffae45;
    }

    .bg-red {
      background: #ff6245;
    }
  }

  .table-container {
    height: 90%;
  }

  .today-table {
    height: 100%;

    .operation {
      div {
        width: 60px;
        height: 24px;
        background: #5386f6;
        border-radius: 2px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
      }

      .bg-yellow {
        // width: 80px;
        height: 24px;
        background: #ffae45;
        margin-left: 21px;
        margin-right: 21px;
      }

      .bg-red {
        background: #ff6245;
      }
    }
  }
}

.table-body::v-deep .el-table .cell {
  text-align: center;
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .table {
    height: 82vh;

    .table-container {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .table {
    height: 81vh;

    .table-container {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .table {
    height: 73vh;

    .table-container {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .table {
    height: 74vh;

    .table-container {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}
</style>