<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      append-to-body
      custom-class="dialog-boxed"
      width="70%"
    >
      <div class="dialog-slot">
        <div class="closeClick">
          <div class="newplan">
            <div class="line"></div>
            <div class="span">计划详情</div>
          </div>
          <img src="@/assets/images/close.png" alt="" @click="Close" />
        </div>
        <div class="planInfo">
          <div class="plan-title">
            <div class="item">
              <div class="year">
                <div class="year-span">年份:</div>
                <el-date-picker
                  v-model="form.plannedYear"
                  type="month"
                  format="yyyy-MM"
                  :clearable="false"
                  value-format="yyyy-MM"
                  placeholder="请选择年份"
                >
                </el-date-picker>
              </div>
              <div class="area">
                <div class="area-span">区划:</div>
                <el-cascader
                  v-model="form.district"
                  :disabled="disabled"
                  placeholder="请选择"
                  :options="options"
                  :props="props"
                  @change="handleChange"
                ></el-cascader>
              </div>
            </div>
            <div class="btns">
              <!-- <div class="export" @click="exportFile">
                <img src="@/assets/images/export.png" alt="">
                <span>导出excel</span>
              </div> -->
              <div class="select-btn reset" @click="select">搜索</div>
              <div class="select-btn" @click="reset">重置</div>
            </div>
          </div>
          <!-- <div class="plan-content">
            <div class="item-two">
              <div>计划内容：</div>
              <div class="content">{{ content }}</div>
            </div>
            <div class="item-two">
              <div>备注：</div>
              <div class="content">{{ remark ?remark:'暂无备注'}}</div>
            </div>
          </div> -->
        </div>
        <div class="tables" v-loading="loading">
          <el-table
            :data="tableData"
            style="width: 100%"
            :border="false"
            ref="multipleTable"
            tooltip-effect="light"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="plannedYear"
              label="计划年月"
              show-overflow-tooltip
              header-align="center"
            >
            </el-table-column>
            <el-table-column
              prop="district"
              label="行政区划"
              show-overflow-tooltip
              header-align="center"
            >
            </el-table-column>
            <el-table-column
              prop="entprName"
              label="企业名称"
              show-overflow-tooltip
              header-align="center"
            >
            </el-table-column>
            <!-- <el-table-column
              prop="address"
              label="企业类型"
              show-overflow-tooltip
              header-align="center"
            >
            </el-table-column> -->
            <el-table-column
              prop="createTime"
              label="创建时间"
              show-overflow-tooltip
              header-align="center"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime.split(" ")[0] }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <div class="tabs-btns">
                  <div class="look" @click="look(scope.row)">
                    <img src="@/assets/images/look.png" alt="">
                    <span>查看</span>
                  </div>
                  <div class="change" @click="change(scope.row)">
                    <img src="@/assets/images/change.png" alt="">
                    <span>修改</span>
                  </div>
                  <div class="delete" @click="deleteItem(scope.row)">
                    <img src="@/assets/images/delete.png" alt="">
                    <span>删除</span>
                  </div>
                </div>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="pagination">
          <my-pagination
            :total="tableData.length"
            @pagesChange="pagesChange"
          ></my-pagination>
        </div>
      </div>
    </el-dialog>
    <dialog-info ref="dialoginfo"></dialog-info>
  </div>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue";
import dialogInfo from "@/views/components/dialogInfo/index.vue";
export default {
  components: { myPagination, dialogInfo },
  data() {
    return {
      dialogVisible: false,
      options: [],
      props: {
        value: "county",
        label: "institutionName",
        checkStrictly: true,
      },
      disabled: false,
      tableData: [],
      total: 0,
      pages: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      form: {
        district: [],
        plannedYear: "",
      },
      dept: null,
    };
  },
  methods: {
    async open(item, dept) {
      // console.log(dept)
      this.dept = dept;
      this.dialogVisible = true;
      // let data = await this.$api.yingji.tree();
      // this.commentData(data.data,dept)
      this.getList(this.pages);
    },
    Close() {
      this.dialogVisible = false;
      this.pages.pageNum = 1;
      this.pages.pageSize = 10;
    },
    // 导出
    exportFile() {
      this.$confirm(`确认根据您的搜索条件导出搜索之后的数据吗?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.download(
            "/pharmaceuticals/bPlanManage/export",
            {
              ...this.form,
            },
            `计划管理.xlsx`
          );
        })
        .catch(() => {});
    },
    // 区划级联选择器选择触发
    handleChange(value) {
      console.log(value);
      if (value.length == 2) {
        this.form.district = value[1];
      } else {
        this.form.district = value[0];
      }
    },
    // 获取列表
    async getList(obj) {
      this.loading = true;
      let data = await this.$api.yingji.planmx(obj);
      if (data.code == 200) {
        this.loading = false;
      }
      this.tableData = data.data.list;
    },
    // 页码，当前页切换事件
    pagesChange(pages) {
      let obj = { ...pages, ...this.form };
      this.getList(obj);
      this.pages = pages;
    },
    // 搜索
    select() {
      // const { district,plannedYear } = this.form
      this.pages.pageNum = 1;
      this.pages.pageSize = 10;
      let obj = { ...pages, ...this.form };
      this.getList(obj);
    },
    // 重置
    reset() {
      Object.keys(this.form).forEach((key) => (this.form[key] = ""));
      this.pages.pageNum = 1;
      this.pages.pageSize = 10;
      this.getList(this.pages);
    },
    // 查看
    look(row) {
      this.$refs.dialoginfo.open(row);
    },
    // 修改
    change(row) {
      // this.$refs.myDialog.open(row,this.dept)
    },
    // 删除
    deleteItem(row) {
      let idList = [];
      idList.push(row.id);
      this.$modal
        .confirm("你确认要删除该条数据吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(async () => {
          this.loading = true;
          try {
            let downloadLoadingInstance = Loading.service({
              text: "正在删除计划，请稍候",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            // let data = await this.$api.yingji.bPlanManage('delete',_,{idList:idList.join(',')})
            // if(data.code == 200) {
            //   this.loading = false;
            //   downloadLoadingInstance.close();
            //   this.$message({
            //     message: '删除成功',
            //     type: 'success'
            //   });
            //   let { district} = this.form;
            //   let obj = {...this.pages,district}
            //   this.getList(obj);
            // }
          } catch (error) {
            downloadLoadingInstance.close();
            console.log(error);
          }
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
    // 行政区划获取
    commentData(item, dept) {
      item.map((item) => {
        if (item.children instanceof Array && item.children.length == 0) {
          item.county = item.subdistrict;
          delete item.children;
        } else {
          // this.props.value = 'subdistrict'
          this.commentData(item.children, this.dept);
        }
      });
      this.options = item;
      if (dept.parentId == 100) {
        this.options = this.options.filter((item) => {
          return item.institutionName == dept.deptName;
        });
        this.options.map((item) => {
          if (item.institutionName == dept.deptName) {
            this.form.district = item.county;
            delete item.children;
          }
        });
        this.disabled = true;
      } else if (dept.parentId == 101) {
        this.options.map((item) => {
          if (item.institutionName == dept.deptName) {
            this.form.district = item.subdistrict;
          }
        });
        this.disabled = true;
      }
      // console.log(this.options)
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
<style lang="scss" scoped>
.isStyle {
  color: #f71052;
}
.dialog-slot {
  .closeClick {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 20px;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background: #f8f9fa;
    box-shadow: 0px 1px 0px 0px #dbe0e8;
    background-color: #e0eaf8;
    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
    .newplan {
      display: flex;
      align-items: center;
      .line {
        margin-right: 10px;
        width: 5px;
        height: 16px;
        background-color: #1e70de;
      }
      .span {
        font-size: 16px;
        font-family: "Alibaba PuHuiTi";
        font-weight: bold;
        color: #1e70de;
      }
    }
  }
  .planInfo {
    padding: 10px 30px;
    .plan-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item {
        display: flex;
        align-items: center;
        .year {
          display: flex;
          align-items: center;
          margin-right: 81px;
          .year-span {
            font-size: 14px;
            font-family: "Alibaba PuHuiTi";
            font-weight: 400;
            color: #525966;
            line-height: 40px;
            margin-right: 10px;
          }
        }
        .area {
          display: flex;
          align-items: center;
          .area-span {
            font-size: 14px;
            font-family: "Alibaba PuHuiTi";
            font-weight: 400;
            color: #525966;
            line-height: 40px;
            margin-right: 10px;
          }
          ::v-deep .el-cascader {
            background-color: transparent;
            width: 276px;
            .el-input__inner {
              height: 33px;
            }
            .el-input
              .el-input__suffix
              .el-input__suffix-inner
              .el-icon-arrow-down::before {
              content: "";
              background: url(../../../assets/images/down2.png) center center
                no-repeat;
              background-size: cover;
              position: absolute;
              width: 10px;
              height: 7px;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
        ::v-deep .el-select {
          background-color: transparent;
          width: 276px;
          .el-input__inner {
            height: 33px;
          }
          .el-input
            .el-input__suffix
            .el-input__suffix-inner
            .el-icon-arrow-up {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .el-input
            .el-input__suffix
            .el-input__suffix-inner
            .el-icon-arrow-up::before {
            content: "";
            background: url(../../../assets/images/down2.png) center center
              no-repeat;
            background-size: cover;
            position: absolute;
            width: 10px;
            height: 7px;
            transform: rotate(180deg);
          }
        }
      }
      .btns {
        display: flex;
        align-items: center;
        .export,
        .newProject {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 6px 19px;
          cursor: pointer;
          img {
            width: 22px;
            margin-right: 10px;
          }
          span {
            color: #ffffff;
            font-size: 14px;
            font-family: "Alibaba PuHuiTi";
            font-weight: 400;
          }
        }
        .select-btn {
          width: 120px;
          height: 34px;
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 15px;
          font-family: "Alibaba PuHuiTi";
          font-weight: 500;
          color: #ffffff;
          cursor: pointer;
          background: #fdab5b;
          margin-left: 20px;
        }
        .reset {
          background-color: #2378ec;
        }
        .export {
          background-color: #2378ec;
          margin-right: 30px;
        }
        .newProject {
          background-color: #28b384;
        }
      }
      // .export {
      //   display: flex;
      //   align-items: center;
      //   justify-content: center;
      //   background-color: #2378EC;
      //   padding: 6px 19px;
      //   cursor: pointer;
      //   img {
      //     width: 22px;
      //     margin-right: 10px;
      //   }
      //   span {
      //     color: #ffffff;
      //     font-size: 14px;
      //     font-family: 'Alibaba PuHuiTi';
      //     font-weight: 400;
      //   }
      // }
    }
    .plan-content {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .item-two {
        flex: 1;
        display: flex;
        div {
          font-size: 15px;
          font-family: "Alibaba PuHuiTi";
          font-weight: 400;
          color: #525966;

          &:nth-child(1) {
            text-align: right;
            width: 80px;
            font-size: 16px;
            font-family: "Alibaba PuHuiTi";
            font-weight: 400;
            color: #525966;
          }
        }
        .content {
          flex: 1;
        }
      }
    }
  }
  .tables {
    margin-top: 20px;
    background-color: #eaf2fd;
    ::v-deep .el-table {
      .success-row {
        background-color: rgba(234, 242, 253, 0.25);
      }
      td {
        height: 30px;
        text-align: center;
        font-size: 15px;
        font-family: "Alibaba PuHuiTi";
        font-weight: 400;
        color: #525966;
      }
      th {
        height: 30px;
        background-color: #eaf2fd;
        font-size: 16px;
        font-family: "Alibaba PuHuiTi";
        font-weight: bold;
        color: #525966;
        .el-checkbox {
          display: none;
        }
      }
      .el-table__body-wrapper {
        height: 448px !important;
        overflow-y: auto;
      }
      .tabs-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        .look,
        .change,
        .delete {
          display: flex;
          align-items: center;
          margin-right: 30px;
          cursor: pointer;
          img {
            width: 20px;
            margin-right: 5px;
          }
          span {
            font-size: 15px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #045ffd;
          }
        }
        .delete {
          margin-right: 0;
          span {
            color: #f71052;
          }
        }
      }
    }
    ::v-deep .el-table::before {
      height: 0;
    }
  }
  .pagination {
    margin-top: 10px;
  }
}
::v-deep .el-dialog__body {
  padding: 30px 15px;
}
</style>
