<template>
  <div class="container-main" ref="main">
    <div class="search-hearder" ref="topSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="auto"
      >
        <el-form-item label="燃气企业名称" prop="gasEnterprise">
          <el-input
            v-model="queryParams.gasEnterprise"
            placeholder="请输入燃气企业名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </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-form-item>
      </el-form>
    </div>

    <div class="layui-table-tool" ref="tableTool">
      <el-button
        type="primary"
        size="mini"
        @click="handleAdd"
        v-hasPermi="['mudu:receiver:add']"
        >新增</el-button
      >
      <el-button
        type="warning"
        size="mini"
        :loading="exportLoading"
        @click="handleExport"
        v-hasPermi="['mudu:receiver:export']"
        >导出</el-button
      >
    </div>

    <el-table
      v-loading="loading"
      :data="receiverList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" align="center" prop="id" width="55">
        <template slot-scope="scop">
          {{
            scop.$index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize
          }}
        </template>
      </el-table-column>
      <el-table-column label="用户类型" align="center" prop="userType" />
      <el-table-column label="用户名称" align="center" prop="userName" />
      <el-table-column label="用气地址" align="center" prop="address" />
      <el-table-column label="规格" align="center" prop="specification" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-view"
            @click="handleInfo(scope.row)"
            v-hasPermi="['mudu:receiver:list']"
          >
            查看
          </el-button>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['mudu:receiver:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['mudu:receiver: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
      :visible.sync="open"
      width="1200px"
      append-to-body
      custom-class="dialog-box"
    >
      <div slot="title" class="dialog-title">{{ title }}</div>

      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="130px"
        custom-class="dialog-from"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属街道" prop="area">
              <el-input v-model="form.area" placeholder="请输入所属街道" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="燃气企业名称" prop="gasEnterprise">
              <el-input
                v-model="form.gasEnterprise"
                placeholder="请输入燃气企业名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="储配站名称" prop="storageStationName">
              <el-input
                v-model="form.storageStationName"
                placeholder="请输入储配站名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户类型" prop="userType">
              <el-input v-model="form.userType" placeholder="请输入用户类型" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户身份证" prop="useIds">
              <el-input v-model="form.useIds" placeholder="请输入用户身份证" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用气地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入用气地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="制造单位" prop="manufacturingUnit">
              <el-input
                v-model="form.manufacturingUnit"
                placeholder="请输入制造单位"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制造年月" prop="manufacturingData">
              <el-input
                v-model="form.manufacturingData"
                placeholder="请输入制造年月"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出厂编号" prop="exFactoryNumb">
              <el-input
                v-model="form.exFactoryNumb"
                placeholder="请输入出厂编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="条码号" prop="barNumb">
              <el-input v-model="form.barNumb" placeholder="请输入条码号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="规格" prop="specification">
              <el-input v-model="form.specification" placeholder="请输入规格" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单双阀类型" prop="singleDoubleValveType">
              <el-input
                v-model="form.singleDoubleValveType"
                placeholder="请输入单双阀类型"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="气瓶状态" prop="cylinderCondition">
          <el-input
            v-model="form.cylinderCondition"
            placeholder="请输入气瓶状态"
          />
        </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>
    <!--查看储气罐详情页-->
    <el-dialog
      :visible.sync="infoOpen"
      width="1200px"
      custom-class="dialog-box"
      append-to-body
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <div slot="title" class="dialog-title">{{ infoTitle }}</div>

      <div class="info_box">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="所属街道">{{
            form.area
          }}</el-descriptions-item>

          <el-descriptions-item label="燃气企业名称">{{
            form.gasEnterprise
          }}</el-descriptions-item>

          <el-descriptions-item label="储配站名称">{{
            form.storageStationName
          }}</el-descriptions-item>

          <el-descriptions-item label="用户类型">{{
            form.userType
          }}</el-descriptions-item>

          <el-descriptions-item label="用户名称">{{
            form.userName
          }}</el-descriptions-item>

          <el-descriptions-item label="用户身份证">{{
            form.useIds
          }}</el-descriptions-item>

          <el-descriptions-item label="手机号码">{{
            form.phone
          }}</el-descriptions-item>

          <el-descriptions-item label="用气地址">{{
            form.address
          }}</el-descriptions-item>

          <el-descriptions-item label="制造单位">{{
            form.manufacturingUnit
          }}</el-descriptions-item>

          <el-descriptions-item label="制造年月">{{
            form.manufacturingData
          }}</el-descriptions-item>

          <el-descriptions-item label="出厂编号">{{
            form.exFactoryNumb
          }}</el-descriptions-item>

          <el-descriptions-item label="条码号">{{
            form.barNumb
          }}</el-descriptions-item>

          <el-descriptions-item label="规格">{{
            form.specification
          }}</el-descriptions-item>

          <el-descriptions-item label="单双阀类型">{{
            form.singleDoubleValveType
          }}</el-descriptions-item>

          <el-descriptions-item label="气瓶状态">{{
            form.cylinderCondition
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listReceiver,
  getReceiver,
  delReceiver,
  addReceiver,
  updateReceiver,
  exportReceiver,
} from "@/api/mudu/receiver";
export default {
  name: "Receiver",
  //注释字典
  data() {
    const validatePhone = (rule, value, callback) => {
      const regExp =
        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (!regExp.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    const isCardID = (rule, value, callback) => {
      if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error("你输入的身份证长度或格式错误"));
      }
      //身份证城市
      var aCity = {
        11: "北京",
        12: "天津",
        13: "河北",
        14: "山西",
        15: "内蒙古",
        21: "辽宁",
        22: "吉林",
        23: "黑龙江",
        31: "上海",
        32: "江苏",
        33: "浙江",
        34: "安徽",
        35: "福建",
        36: "江西",
        37: "山东",
        41: "河南",
        42: "湖北",
        43: "湖南",
        44: "广东",
        45: "广西",
        46: "海南",
        50: "重庆",
        51: "四川",
        52: "贵州",
        53: "云南",
        54: "西藏",
        61: "陕西",
        62: "甘肃",
        63: "青海",
        64: "宁夏",
        65: "新疆",
        71: "台湾",
        81: "香港",
        82: "澳门",
        91: "国外",
      };
      if (!aCity[parseInt(value.substr(0, 2))]) {
        callback(new Error("你的身份证地区非法"));
      }

      // 出生日期验证
      var sBirthday = (
          value.substr(6, 4) +
          "-" +
          Number(value.substr(10, 2)) +
          "-" +
          Number(value.substr(12, 2))
        ).replace(/-/g, "/"),
        d = new Date(sBirthday);
      if (
        sBirthday !=
        d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()
      ) {
        callback(new Error("身份证上的出生日期非法"));
      }

      // 身份证号码校验
      var sum = 0,
        weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
        codes = "10X98765432";
      for (var i = 0; i < value.length - 1; i++) {
        sum += value[i] * weights[i];
      }
      var last = codes[sum % 11]; //计算出来的最后一位身份证号码
      if (value[value.length - 1] != last) {
        callback(new Error("你输入的身份证号非法"));
      }

      callback();
    };
    return {
      //查看详情
      infoOpen: false,
      //详情标题
      infoTitle: "",
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 储气罐表格数据
      receiverList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        gasEnterprise: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        area: [
          { required: true, message: "所属街道不能为空", trigger: "change" },
        ],
        gasEnterprise: [
          {
            required: true,
            message: "燃气企业名称不能为空",
            trigger: "change",
          },
        ],
        storageStationName: [
          { required: true, message: "储配站名称不能为空", trigger: "change" },
        ],
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "change" },
        ],
        userType: [
          { required: true, message: "用户类型不能为空", trigger: "change" },
        ],
        useIds: [
          { required: true, message: "用户身份证不能为空", trigger: "change" },
        ],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "change" },
          {
            validator: validatePhone,
            trigger: "change",
          },
        ],
        address: [
          { required: true, message: "用气地址不能为空", trigger: "change" },
        ],
        manufacturingUnit: [
          { required: true, message: "制造单位不能为空", trigger: "change" },
        ],
        manufacturingData: [
          { required: true, message: "制造年月不能为空", trigger: "change" },
        ],
        exFactoryNumb: [
          { required: true, message: "出厂编号不能为空", trigger: "change" },
        ],
        barNumb: [
          { required: true, message: "条码号不能为空", trigger: "change" },
        ],
        specification: [
          { required: true, message: "规格不能为空", trigger: "change" },
        ],
        singleDoubleValveType: [
          { required: true, message: "单双阀类型不能为空", trigger: "change" },
        ],
        cylinderCondition: [
          { required: true, message: "气瓶状态不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询储气罐列表 */
    getList() {
      this.loading = true;
      listReceiver(this.queryParams).then((response) => {
        this.receiverList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,

        area: null,

        gasEnterprise: null,

        storageStationName: null,

        userType: null,

        userName: null,

        useIds: null,

        phone: null,

        address: null,

        manufacturingUnit: null,

        manufacturingData: null,

        exFactoryNumb: null,

        barNumb: null,

        specification: null,

        singleDoubleValveType: null,

        cylinderCondition: null,

        createId: null,

        createBy: null,

        createTime: null,

        updateId: null,

        updateBy: null,

        updateTime: null,

        remark: null,

        userId: null,

        deptId: 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;
    },
    /**查看按钮操作 */
    handleInfo(row) {
      this.reset();
      const id = row.id || this.ids;
      getReceiver(id).then((response) => {
        this.form = response.data;
        this.infoOpen = true;
        this.infoTitle = "查看储气罐详情";
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加储气罐";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getReceiver(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) {
            updateReceiver(this.form).then((response) => {
              this.$model.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addReceiver(this.form).then((response) => {
              this.$model.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除储气罐编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delReceiver(ids);
        })
        .then(() => {
          this.getList();
          this.$model.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有储气罐数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.download(
            "/mudu/receiver/export",
            {
              ...this.queryParams,
            },
            "储气罐_" + new Date().getTime() + ".xlsx"
          );
          this.exportLoading = false;
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.container-main {
  height: calc(100vh - 84px);
  // height: 100%;
  overflow: hidden;
  padding: 0 10px;
}
::v-deep .el-descriptions-row th {
  background: #f5f5f5;
  color: #333;
  font-weight: bold !important;
  width: 16% !important;
}
::v-deep .el-descriptions-row td {
  width: 34% !important;
}
::v-deep .el-select.el-select--medium {
  width: 100%;
}
</style>
