<template>
  <div class="app-container">
    <el-row :gutter="24">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <div class="quer-box">
            <div class="query-box__left">
              <el-form-item prop="communityId">
                <el-select
                  style="width:180px;"
                  v-model="queryParams.communityId"
                  filterable
                  placeholder="请选择医共体"
                >
                  <el-option
                    v-for="item in cimmunity"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.state == 1 ? false : true"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="pharmacyId">
                <el-select
                  style="width:180px;"
                  v-model="queryParams.pharmacyId"
                  filterable
                  placeholder="请选择药房"
                >
                  <el-option
                    v-for="item in listMedicalPharmacyArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.state == 1 ? false : true"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="remake">
                <el-input
                  style="width:180px;"
                  placeholder="请输入会计日历"
                  v-model="queryParams.remark"
                ></el-input>
              </el-form-item>

              <el-form-item prop="state">
                <el-select
                  style="width:180px;"
                  v-model="queryParams.state"
                  filterable
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="item in stateArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handleQuery"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd"
                  v-hasPermi="['pharmacy:log:add']"
                  >新增</el-button
                >
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="handleDelete"
                  v-hasPermi="['pharmacy:log:remove']"
                  >删除</el-button
                >
              </el-form-item>
            </div>
          </div>
        </el-form>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      size="mini"
      :data="logList"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column
        label="医共体名称"
        align="center"
        prop="communityName"
        width="200"
      />
      <el-table-column label="药房名称" align="center" prop="pharmacyName" />
      <!--  :show-overflow-tooltip="true" -->
      <el-table-column
        label="会计日历"
        align="center"
        prop="remark"
        width="300"
        show-overflow-tooltip></el-table-column>
      <el-table-column
        label="开始日期"
        align="center"
        prop="startTime"
        width="180"
      >
        <!-- <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime, "{y}-{m}-{d}") }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        label="结束时间"
        align="center"
        prop="endTime"
        width="180"
      >
        <!-- <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime, "{y}-{m}-{d}") }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        label="结转时间"
        align="center"
        prop="overTime"
        width="180"
      >
        <!-- <template slot-scope="scope">
          <span>{{ parseTime(scope.row.overTime, "{y}-{m}-{d}") }}</span>
        </template> -->
      </el-table-column>

      <el-table-column label="状态" align="center" prop="state">
        <template slot-scope="scope">
          <dict-tag :options="stateArr" :value="scope.row.state" />
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            style="width: 40px"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['pharmacy:log:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="primary"
            style="width: 40px"
            @click="handleDelete(scope.row)"
            v-hasPermi="['pharmacy:log:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改会计期间对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="医共体" prop="communityId">
          <!-- <el-input v-model="form.communityId" placeholder="请输入医共体id" />
          <el-select
            v-model="form.communityId"
            placeholder="请选择医共体"
            clearable
            size="small"
            @change="handleChangeCommunity"
            style="width: 100%"
          > -->
          <el-select
            v-model="form.communityId"
            placeholder="请选择医共体"
            clearable
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in cimmunity"
              :key="index"
              :label="item.name"
              :value="item.id"
              :disabled="item.state == 1 ? false : true"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="医疗机构" prop="mechanismId">
          <!-- <el-select
            v-model="form.mechanismId"
            placeholder="请选择医疗机构"
            clearable
            size="small"
            @change="handlechangeMechanidm"
            style="width: 100%"
          > -->
          <el-select
            v-model="form.mechanismId"
            placeholder="请选择医疗机构"
            clearable
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in mechanism"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.state == 1 ? false : true"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="药房名称" prop="pharmacyId">
          <!-- <el-input v-model="form.pharmacyId" placeholder="请输入药房id" /> -->
          <el-cascader
            v-model="form.pharmacyId"
            :options="MedicalPharmacyList"
            :props="{ checkStrictly: true, emitPath: false }"
            :show-all-levels="false"
            clearable
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="会计日历" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            clearable
            size="small"
            v-model="form.startTime"
            value-format="yyyy-MM-dd"
            placeholder="选择开始时间"
            type="date"
            style="width: 100%"
            :picker-options="startTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            clearable
            size="small"
            v-model="form.endTime"
            value-format="yyyy-MM-dd"
            placeholder="选择结束时间"
            type="date"
            style="width: 100%"
            :picker-options="endTime"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listLog,
  getLog,
  delLog,
  addLog,
  updateLog,
  exportLog,
} from "@/api/medical/log";
import { listMechanism as getListMechanism } from "@/api/pharmacy/mechanism";
import { listMechanismId } from "@/api/medical/mechanism";
import { listMedicalPharmacy } from "@/api/pharmacy/MedicalPharmacy";
import { listCommunity } from "@/api/medical/community";

export default {
  name: "Log",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      edit: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 会计期间表格数据
      logList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态字典
      stateOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
        pharmacyId: null,
        communityId: null,
        state: null,
        overTime: null,
        remark: null,
      },
      cimmunity: [], //医共体ID
      // 表单参数
      form: {
        endTime: null,
        startTime: null,
      },
      // 表单校验
      rules: {
        mechanismId: [
          { required: true, message: "请选择医疗机构", trigger: "blur" },
        ],
        pharmacyId: [
          { required: true, message: "请选择药房名称", trigger: "blur" },
        ],
        communityId: [
          { required: true, message: "请选择医共体", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "请输入会计日历", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请选择开始日期", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择结束日期", trigger: "blur" },
        ],
      },
      community: [], // 医共体
      pharmacy: [], // 药房名称
      value: null,
      MedicalPharmacyList: [], //药房列表
      cimmunity: [], //医共体列表
      mechanism: [], //医疗机构列表
      deptList: [], //科室列表
      communityForm: [],
      mechanismForm: [],
      deptForm: [],
      listMedicalPharmacyArr: [],
      startTime: {
        disabledDate: (time) => {
          if (this.form.endTime) {
            return time.getTime() > new Date(this.form.endTime).getTime();
          } else {
            // return time.getTime() > Date.now();
          }
        },
      },
      // 结束时间大于开始时间，且小于此刻
      endTime: {
        disabledDate: (time) => {
          if (this.form.startTime) {
            return time.getTime() < new Date(this.form.startTime).getTime();
          } else {
            // return time.getTime() > Date.now();
          }
        },
      },
      stateArr: [
        { name: "当前", id: "0" },
        { name: "未结转", id: "1" },
        { name: "已结转", id: "2" },
        // { name: "当前", id: "2" },
      ],
    };
  },
  computed: {
    getPharmacyId: function () {
      return this.form.pharmacyId;
    },
    // getCommunityId: function () {
    //   return this.form.communityId;
    // },
    getMechanismId: function () {
      return this.form.mechanismId;
    },
  },
  watch: {
    'form.communityId' (val) {
      if (!this.edit) {
        this.form.mechanismId = ''
        this.form.pharmacyId = ''
      }
      this.handleChangeCommunity(val);
    },
    'form.mechanismId' (val) {
      if (!this.edit) {
        this.form.pharmacyId = ''
      }
      this.handlechangeMechanidm(val);
    },
    getPharmacyId: {
      handler(val, oldVal) {
        //console.log("b.c: " + val, oldVal);
        this.getListMechanism(val, "1");
      },
      deep: true,
    },
    getCommunityId: {
      handler(val, oldVal) {
        //console.log("b.c: " + val, oldVal);
        this.getListMechanism(val, "2");
      },
      deep: true,
    },
    getMechanismId: {
      handler(val, oldVal) {
        //console.log("b.c: " + val, oldVal);
        this.getListMechanism(val, "3");
      },
      deep: true,
    },
    'form.endTime' (val) {
      if (val) {
        this.form.remark = val.replaceAll('-', '').substr(0, 6)
      }
    }
  },
  created() {
    this.getList();
    this.getListMedicalPharmacyChange();
    this.getCommunityList();
    this.getDicts("sys_normal_disable").then((response) => {
      this.stateOptions = response.data;
    });
    this.getCommunityList();
  },
  methods: {
    /** 查询医共体列表 */
    getCommunityList() {
      listCommunity().then((response) => {
        this.cimmunity = response.rows;
      });
    },
    /** 查询药房 **/
    getListMedicalPharmacyChange() {
      listMedicalPharmacy({
        state: 1
      }).then((res) => {
        //console.log(res, "999");
        this.listMedicalPharmacyArr = res.data;
      });
    },
    /** 查询会计期间列表 */
    getList() {
      this.loading = true;
      listLog(this.queryParams).then((response) => {
        this.logList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询药房列表 */
    getMedicalPharmacy(mechanismId) {
      //this.loading = true;
      listMedicalPharmacy({ mechanismId }).then((response) => {
        this.MedicalPharmacyList = this.handleTree(
          response.data,
          "id",
          "parentId"
        );
        _readNodes(this.MedicalPharmacyList);
        function _readNodes(nodes = [], arr = []) {
          for (let item of nodes) {
            item.label = item.name;
            item.value = item.id;
            if (item.children && item.children.length)
              _readNodes(item.children, arr);
          }
        }

        //this.loading = false;
      });
    },
    /** 查询医共体列表 */
    getCommunityList() {
      listCommunity().then((response) => {
        this.cimmunity = response.rows;
      });
    },
    /** 通过医共体id查询机构 **/
    handleChangeCommunity() {
      if (this.form.communityId) {
        this.getMechanismList(this.form.communityId);
      }
    },
    /** 查询医疗机构名称 **/
    getMechanismList(id) {
      listMechanismId(id).then((response) => {
        this.mechanism = response.data;
      });
    },
    /** 通过医疗机构查询药房 **/
    handlechangeMechanidm() {
      if (this.form.mechanismId) {
        this.getMedicalPharmacy(this.form.mechanismId);
      }
    },
    /** 查询对照列表 */
    getListMechanism(id, type) {
      if (!id) return;
      this.loading = true;
      switch (type) {
        case "1":
          this.form.pharmacyId = id;
          break;
        case "2":
          this.form.communityId = id;
          break;
        case "3":
          this.form.mechanismId = id;
          break;
      }
      getListMechanism(this.form).then((response) => {
        switch (type) {
          case "1":
            this.communityForm = response.rows;
            break;
          case "2":
            this.mechanismForm = response.rows;
            break;
          case "3":
            this.deptForm = response.rows;
            break;
        }
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        startTime: null,
        endTime: null,
        remark: null,
        mechanismId: null,
        pharmacyId: null,
        communityId: null,
        state: null,
        overTime: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        del: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加会计期间";
      this.edit = false
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      this.form = Object.assign({}, row)
      this.open = true;
      this.title = "修改会计期间";
      this.edit = true
      /*getLog(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改会计期间";
      });*/
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateLog(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addLog(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm("确定需要删除已选数据吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delLog(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有会计期间数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return exportLog(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
  },
};
</script>
