<template>
  <div>
    <el-card class="el-card">
      <el-form :model="orderQuery" size="mini" label-width="100px" v-show="showSearch">
        <el-row>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="单据编号:">
              <el-input v-model="orderQuery.bill_code" placeholder="单据编号"
                        style="width: 90%"
                        clearable="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据类型:" class="query-form-item">
              <el-select v-model="orderQuery.bill_type" style="width: 90%" placeholder="选择单据" clearable>
                <el-option label="所有" :value="'A'"></el-option>
                <el-option label="入库" :value="'AI'"></el-option>
                <el-option label="出库" :value="'AO'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--<el-col :span="6">-->
          <!--  <el-form-item class="query-form-item" label="药品信息:">-->
          <!--    <el-input v-model="orderQuery.cpmctymc" placeholder="药品信息" clearable="true"-->
          <!--              style="width: 90%"-->
          <!--    ></el-input>-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
          <el-col :span="6">
            <el-form-item class="query-form-item" label="发货单位:">
              <el-input v-model="orderQuery.bzgg" placeholder="发货单位" clearable="true"
                        style="width: 90%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="query-form-item" label="收货单位:">
              <el-input v-model="orderQuery.ylqxzcrbarmc" placeholder="收货单位"
                        style="width: 90%"
                        clearable="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="6">
            <el-form-item label="单据时间:">
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="actDateRange"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                style="width: 300px"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="top-right-btn">
        <el-button-group>
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button type="primary" icon="el-icon-check" @click="confirmSelect">确定</el-button>
        </el-button-group>
      </div>
      <el-table
        :data="dataList"
        style="width: 100%"
        highlight-current-row="false"
        v-loading="loading"
        border
        @current-change="handleChange"
        ref="multipleTable"
      >
        <el-table-column label width="45">
          <template slot-scope="scope">
            <el-radio :label="scope.row.billCode" v-model="radioCheck"><span></span></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column
          label="订单编号"
          prop="billCode"
          width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="单据类型"
          prop="billTypeName"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          label="药品信息"
          prop="packUnit"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          width="100"
          label="批次号"
          prop="bzgg"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="发货单位"
          prop="fromUserName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="收货单位"
          prop="toUserName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="包装规格"
          prop="zczbhhzbapzbh"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="生产日期"
          prop="price"
          show-overflow-tooltip
        ></el-table-column>
        <!--<el-table-column-->
        <!--  label="器械类别"-->
        <!--  prop="qxlb"-->
        <!--  show-overflow-tooltip-->
        <!--&gt;</el-table-column>-->
        <el-table-column
          label="有效期至"
          prop="companyName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          width="120"
          label="最小包装数量"
          prop="companyName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          width="120"
          label="单据时间"
          prop="billTime"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.stop="handleDetailClick(scope.row)"
            >详情
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.native.stop="handleCodeDetailClick(scope.row)"
            >追溯码明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="pageTotal>0"
        :total="pageTotal"
        :page.sync="orderQuery.page"
        :limit.sync="orderQuery.limit"
      />
      <!--@pagination="getList"-->
    </el-card>


    <el-dialog
      title="追溯码明细"
      :visible.sync="codeDetailVisible"
      append-to-body width="60%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="codeDetailVisible"
    >
      <retraceCodeDetailDialog>

      </retraceCodeDetailDialog>
    </el-dialog>
  </div>
</template>

<script>
import retraceCodeDetailDialog from './retraceCodeDetailDialog'
// import { getCodeList } from '@/api/inout/order'

export default {
  components: { retraceCodeDetailDialog },
  data() {
    return {
      orderQuery: {
        bill_code: '',
        bill_type: 'A',
        begin_date:'',
        ens_date:'',
        cur_page: 1,
        page_size: 10
      },
      pageTotal: 10,
      dataList: [
        {
          billCode: '1000110',
          billTypeName: '使用出库',
          packUnit: '注射用A型肉毒毒素 注射剂 100U/瓶',
          bzgg: '20230958-2',
          // prepnSpec:"注射剂",
          fromUserName: '厦门湖里妇幼保健院'
        },
        {
          billCode: '1000111',
          billTypeName: '采购入库',
          packUnit: '注射用A型肉毒毒素 注射剂 100U/瓶',
          bzgg: '20230958-2',
          prepnSpec: '厦门湖里妇幼保健院',
          fromUserName: '国药控股福建有限公司'
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      actDateRange: [],
      showSearch: true,
      codeDetailVisible: false,
      radioCheck: null
    }
  },
  methods: {
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    handleCodeDetailClick(row) {
      this.codeDetailVisible = true
      const parts = row.packUnit.split(' ')
      let drugName = parts[0] // 第一个字段
      let dosageForm = parts[1] // 第二个字段
      let packUnitDetail = parts.slice(2).join(' ')
      console.log('1', drugName)
      console.log('2', dosageForm)
      console.log('3', packUnitDetail)
    },
    handleChange(currentRow) {
      this.radioCheck = currentRow.billCode
    },
    createDateTime() {
      const end = new Date(); // 结束日期为当前日期
      const start = new Date(); // 开始日期为当前日期
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); // 减去7天
      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
      };
      this.actDateRange = [formatDate(start), formatDate(end)];
    },
    // getList() {
    //   if (this.actDateRange !== null) {
    //     this.orderQuery.begin_date = this.actDateRange[0]
    //     this.orderQuery.ens_date = this.actDateRange[1]
    //   }
    //   getCodeList().then(res => {
    //     if (res.code == 20000) {
    //       this.dataList = res.data
    //     }
    //   })
    // }

  },
  created() {
    // this.getList()
    this.createDateTime()
  }
}
</script>

<style scoped>
.query-form-item {
  display: block !important;
  margin-right: 10px;
  margin-bottom: 5px;
}

div /deep/ .el-table .warning-row {
  background: #bebebe;
}

div /deep/ .el-table .success-row {
  background: #ffffff;
}
</style>
