<template>
  <div class="allDialog">
    <el-dialog
      title="综合查询"
      :visible.sync="dialogVisible"
      width="95%"
      center
    >
      <el-form style="height: 100%;">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="透析分区:">
              <el-select style="width: 110px;" v-model="form.zone">
                <el-option
                  v-for="item in this.DeviceType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="机号:">
              <el-select style="width: 110px;" v-model="form.device_number">
                <el-option
                  v-for="item in this.Numbers"
                  :key="item.id"
                  :label="item.number"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="设备类型:">
              <el-select style="width: 110px;" v-model="form.device_type">
                <el-option
                  v-for="item in this.EquitmentType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="设备型号:">
              <el-select style="width: 110px;" v-model="form.device_model">
                <el-option
                  v-for="item in this.EquitmentName"
                  :key="item.id"
                  :label="item.equitment_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="使用年限:">
              <el-select style="width: 110px;" v-model="form.user_year">
                <el-option
                  v-for="item in this.userYear"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="cell clearfix">
              <label class="title">
                <span class="name">日期查询</span> :
              </label>
              <el-date-picker
                size="small"
                clearable
                v-model="form.start_time"
                prefix-icon="el-icon-date"
                :editable="false"
                style="width: 140px;"
                type="date"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <span class="cellLine">-</span>
              <el-date-picker
                size="small"
                clearable
                v-model="form.end_time"
                prefix-icon="el-icon-date"
                :editable="false"
                style="width: 140px;"
                type="date"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </el-col>
          <el-col :span="4">
            <el-form-item label="合计:">
              故障次数
              <span>{{ failure_times }}</span
              >次
              <!-- <el-input style="width:90px"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="medium" @click="getComprehensive()"
              >查询</el-button
            >
          </el-col>
        </el-row>
        <!-- <el-row> -->
        <el-table
          :data="tableData"
          border
          style="width: 100%;"
          height="330"
          :row-style="{ color: '#303133' }"
          :header-cell-style="{
            backgroundColor: 'rgb(245, 247, 250)',
            color: '#606266'
          }"
        >
          <el-table-column
            prop="date"
            label="序号"
            width="60"
            align="center"
            type="index"
          >
            <!-- <template slot-scope="scope">
                {{ scope.row.id }}
              </template>-->
          </el-table-column>
          <el-table-column prop="name" label="分区" width="60" align="center">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="序列号"
            width="80"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.serial_number
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="设备类型"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.device_type }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="机号"
            width="80"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.bed_number }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="设备名称"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.device_name }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="设备型号"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.device_mode }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="启用日期"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{
              getTime(scope.row.start_date)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="保修期限"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.guarantee_date
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="机器状态"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.machine_status
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="报废日期"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{
              getTime(scope.row.rubbish_date)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="报废原因"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.rubbish_reason
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="使用年限"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.user_year }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="工作时长"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.work_time }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="使用次数"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.user_total }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="故障次数"
            width="100"
            align="center"
          >
            <template slot-scope="scope">{{ failure }}</template>
          </el-table-column>
        </el-table>
        <!-- </el-row> -->
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllSubregion,
  getAllEquimentName,
  getComprehensive,
  getTotalCount
} from "@/api/manage";
import { uParseTime } from "@/utils/tools";
export default {
  name: "MultipleForm",
  props: {
    equimentid: Number
  },
  data() {
    return {
      failure_times: 0,
      failure: 0,
      dialogVisible: false,
      form: {
        zone: "",
        device_number: "",
        device_type: "",
        device_model: "",
        user_year: "",
        start_time: "",
        end_time: ""
      },
      userYear: [
        { id: 0, name: "全部" },
        { id: 1, name: "0~1" },
        { id: 2, name: "1~3" },
        { id: 3, name: "3~10" },
        { id: 4, name: "10年以上" }
      ],
      value1: "",
      value2: "",
      tableData: [],
      EquitmentType: [
        { id: 0, name: "全部" },
        { id: 1, name: "透析机" },
        { id: 2, name: "水处理机" },
        { id: 3, name: "报废机" },
        { id: 4, name: "其他" }
      ],
      DeviceType: [{ id: 0, name: "不限" }],
      Numbers: [{ id: 0, number: "不限" }],
      EquitmentName: [{ id: 0, equitment_name: "全部" }],
      runOptions: [{ value: "1", label: "正常" }, { value: "2", label: "故障" }]
    };
  },
  methods: {
    open: function() {
      this.dialogVisible = true;
    },
    getAllSubregion() {
      getAllSubregion().then(response => {
        if (response.data.state === 1) {
          var zone = response.data.data.zones;
          var zones = [{ id: 0, name: "不限" }];
          for (let i = 0; i < zone.length; i++) {
            const item = zone[i];
            zones.push({ id: item.id, name: item.name });
          }
          this.DeviceType = zones;
          var number = response.data.data.numbers;
          var numbers = [{ id: 0, number: "不限" }];
          for (let index = 0; index < number.length; index++) {
            const item = number[index];
            numbers.push({ id: item.id, number: item.number });
          }
          this.Numbers = numbers;
          // console.log('numbers', number)
        }
      });
    },
    getAllEquimentName() {
      getAllEquimentName().then(response => {
        if (response.data.state == 1) {
          var equit = response.data.data.equit;
          var equits = [{ id: 0, equitment_name: "全部" }];
          for (let index = 0; index < equit.length; index++) {
            const item = equit[index];
            equits.push({ id: item.id, equitment_name: item.equitment_name });
          }
          this.EquitmentName = equits;
        }
      });
    },
    getComprehensive() {
      const params = {
        zone: this.form.zone,
        number: this.form.device_number,
        devicetype: this.form.device_type,
        year: this.form.user_year,
        starttime: this.form.start_time,
        endtime: this.form.end_time
      };
      getComprehensive(params).then(response => {
        if (response.data.state === 1) {
          var macher = response.data.data.macher;

          for (let index = 0; index < macher.length; index++) {
            if (macher[index].device_type === 1) {
              macher[index].device_type = "透析机";
            }
            if (macher[index].device_type === 2) {
              macher[index].device_type = "水处理机";
            }
            if (macher[index].device_type === 3) {
              macher[index].device_type = "其他";
            }

            if (macher[index].machine_status === 1) {
              macher[index].machine_status = "使用机";
            }
            if (macher[index].machine_status === 2) {
              macher[index].machine_status = "备用机";
            }
            if (macher[index].machine_status === 3) {
              macher[index].machine_status = "急诊机";
            }
            if (macher[index].machine_status === 4) {
              macher[index].machine_status = "报废机";
            }
            if (macher[index].rubbish_reason === 0) {
              macher[index].rubbish_reason = "";
            }
          }
          // console.log('macher', macher)
          this.tableData = macher;
        }
      });
    },
    getTime(time) {
      if (time === 0) {
        return "";
      } else {
        return uParseTime(time, "{y}-{m}-{d}");
      }
    },
    getTotalCount() {
      getTotalCount().then(response => {
        if (response.data.state === 1) {
          var total = response.data.data.total;

          this.failure_times = total;
        }
      });
    }
  },
  created() {
    this.getAllSubregion();
    this.getAllEquimentName();
    this.getTotalCount();
  }
};
</script>

<style scoped></style>
<style lang="scss">
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
.allDialog {
  .el-dialog {
    height: 90%;
  }
  .el-dialog__body {
    max-height: calc(100vh - 200px) !important;
  }
}
</style>
