<template>
  <div class="common-box">
    <el-form :model="listQuery" ref="queryForm" :inline="true">
      <el-form-item label="药品信息" prop="drugInfo" class="long">
        <el-input
          v-model="listQuery.drugInfo"
          placeholder="请输入药品名称/生产企业"
        ></el-input>
      </el-form-item>
      <el-form-item label="医疗机构" prop="orgId">
        <el-cascader
          v-model="listQuery.orgId"
          :options="options"
          :show-all-levels='false'
          :props="{ expandTrigger: 'hover', value:'orgId',label:'orgName',children:'child',checkStrictly:true,emitPath:false }"
          clearable
          @change="handleChange">
        </el-cascader>
      </el-form-item>
      <el-form-item label="申请时间" prop="Time">
        <el-date-picker
          v-model="listQuery.Time"
          type="daterange"
          range-separator="至"
          :editable="false"
          value-format="yyyy-MM-dd"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 230px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData('search')">查询 </el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="right-button">
      <el-button style="width:85px;" type="primary" @click="handlePass"
        >审核通过
      </el-button>
      <el-button style="width:85px;" type="danger" @click="handleNoPass"
        >驳回
      </el-button>
    </div>
    <el-table
      v-loading="tableLoading"
      element-loading-text="加载中"
      :data="tableData"
      fit
      stripe
      border
      @selection-change="handleSelectionChange"
      row-key="drugListId"
      :reserve-selection="true"
    >
      <template slot="empty">
        <img src="@/assets/nopage.png" alt />
        <p>暂无数据</p>
      </template>
      <el-table-column type="selection" width="60" :reserve-selection="true" />
      <el-table-column fixed type="index" label="序号" width="50" />
      <el-table-column label="药品编码" prop="drugListId" width="160" />
      <el-table-column label="药品信息" prop="" width="280">
        <template slot-scope="scope">
          <drug-info :info="scope.row"></drug-info>
        </template>
      </el-table-column>
      <el-table-column label="医疗机构" prop="orgName" />
      <el-table-column label="批号" prop="lotNum" />
      <el-table-column label="近效期" prop="prodExpy" />
      <el-table-column label="采购价" prop="purcPric" />
      <el-table-column label="采购金额" prop="purcAmt" />
      <el-table-column label="验收数量" prop="shppCnt" />
      <el-table-column label="退货数量" prop="retnCnt" />
      <el-table-column label="退货金额" prop="retnAmt" />
      <el-table-column label="退货原因" prop="retnRea" />
      <el-table-column label="申请时间" prop="retnDate" width="100" />
      <el-table-column label="采购单编号" prop="purcOrdId" />
    </el-table>
    <el-dialog title="驳回原因" width="20%" :visible.sync="dialogFormVisible">
      <el-form :model="reason" :rules="rules" ref="ruleForm">
        <el-form-item label="驳回原因" prop="reasonData">
          <el-input v-model="reason.reasonData"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleClose('ruleForm')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--分页-->
    <yl-pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getData"
    />
  </div>
</template>

<script>
import drugInfo from "@/views/components/drug-info";
import ylPagination from "@/components/yl-pagination";
import {
  getRetnOrdInfo,
  acpRetnOrd,
  getALLOrgList,
  getALLOrgTree
} from "@/api/orderManage-sup/index";
export default {
  components: { drugInfo, ylPagination },
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
        drugInfo: "",
        startDate: "",
        endDate: "",
        orgId: "",
        Time: []
      },
      tableLoading: false,
      tableData: [],
      total: 0,
      options: [],
      dataList: [],
      reason: {
        reasonData: ""
      },
      rules: {
        reasonData: [
          { required: true, message: "请输入驳回原因", trigger: "blur" }
        ]
      },
      dialogFormVisible: false
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData(type) {
      if (type == "search") {
        this.listQuery.current = 1;
        this.listQuery.startDate = this.listQuery.Time[0]?this.listQuery.Time[0]:"";
        this.listQuery.endDate = this.listQuery.Time[1]?this.listQuery.Time[1]:"";
      }
      this.tableLoading = true;

      getRetnOrdInfo(this.listQuery)
        .then(response => {
          this.tableData = response.data.records;
          this.total = response.data.total;
          this.tableLoading = false;
        })
        .catch(err => {
          this.tableLoading = false;
        });
      getALLOrgTree().then(res =>{
        this.options = res.data
      })
    },
    reset() {
      this.$refs.queryForm.resetFields();
      this.getData('search');
    },
    handleChange(value) {
        console.log(value);
        console.log(this.listQuery.orgName)
    },
    //多选勾选
    handleSelectionChange(val) {
      this.dataList = val;
    },
    // 通过
    handlePass() {
      this.dataList.map(item => {
        item.stas = "Y";
      });
      acpRetnOrd(this.dataList)
        .then(res => {
          this.tableLoading = true;
          if (res.success) {
            this.$message({
              message: "审核通过",
              type: "success"
            });
            this.tableLoading = false;
            this.getData();
          } else {
            this.$message.error("审核失败");
            this.tableLoading = false;
          }
        })
        .catch(err => {
          this.tableLoading = false;
        });
    },
    // 驳回弹窗
    handleNoPass() {
      this.reason.reasonData = "";
      this.dialogFormVisible = true;
    },
    //驳回接口
    submitForm(formName) {},
    handleClose(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dataList.map(item => {
            item.stas = "R";
            item.reason = this.reason.reasonData;
          });
          acpRetnOrd(this.dataList)
            .then(res => {
              this.tableLoading = true;
              if (res.success) {
                this.$message({
                  message: "驳回通过",
                  type: "success"
                });
                this.tableLoading = false;
                this.dialogFormVisible = false;
                this.getData();
              } else {
                this.$message.error("驳回失败");
                this.tableLoading = false;
                this.dialogFormVisible = false;
              }
            })
            .catch(err => {
              this.tableLoading = false;
              this.dialogFormVisible = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .long .el-form-item__content {
  width: 220px;
}
</style>
