<template>
  <div>
    <el-form :inline="true" :model="query" class="query-form" size="mini">
      <el-row>
        <el-form-item class="query-form-item">
          <el-input v-model="query.key" placeholder="搜索"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onReset"
            ></el-button>
            <el-button type="primary" icon="search" @click="getList"
              >查询</el-button
            >
            <el-button type="primary" icon="search" @click="handleAddClick"
              >添加往来单位信息</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-row>
    </el-form>

    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" type="index" fixed></el-table-column>
      <el-table-column label="往来单位ID" prop="unitId" fixed></el-table-column>
      <el-table-column
        label="企业自定义ID"
        prop="thirdId"
        fixed
      ></el-table-column>
      <el-table-column label="名称" prop="name" fixed></el-table-column>
      <el-table-column
        label="往来单位简写"
        prop="spell"
        fixed
      ></el-table-column>
      <el-table-column
        label="社会信用号"
        prop="creditNo"
        fixed
      ></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.stop="handleModifyClick(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native.stop="deleteDialog(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-size="query.limit"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>

    <el-dialog
      :title="editTypeMap[editType]"
      :visible.sync="editDialogVisible"
      width="60%"
    >
      <el-form :model="editQuery" ref="editQuery" :rules="rules">
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col" type="flex">
            <div class="text item">
              <el-form-item label="往来单位名称" prop="name">
                <el-input
                  v-model="editQuery.name"
                  style="width: 60%"
                  size="small"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="text item">
                <el-form-item label="往来单位简写" prop="spell">
                  <el-input
                    v-model="editQuery.spell"
                    size="small"
                    style="width: 60%"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col" type="flex">
            <div class="text item">
              <el-form-item label="企业自定义ID" prop="thirdId">
                <el-input
                  v-model="editQuery.thirdId"
                  style="width: 60%"
                  size="small"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10" class="el-col" type="flex">
            <div class="text item">
              <el-form-item label="社会信用号" prop="creditNo">
                <el-input
                  v-model="editQuery.creditNo"
                  style="width: 60%"
                  size="small"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelDialog" size="small">取消</el-button>
        <el-button type="primary" size="small" @click.native="formSubmit()"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUnitMaintain,
  addUnit,
  modifyUnit,
  deleteUnitMaintain,
} from "../../api/receipts/unitMaintain";

export default {
  data() {
    return {
      query: {
        key: "",
        page: 1,
        limit: 20,
      },

      editQuery: {
        unitId: null,
        thirdId: null,
        name: null,
        spell: null,
        creditNo: null,
      },
      checked: false,
      editDialogVisible: false,
      list: [],
      total: 0,
      multipleSelection: [],
      rules: {
        name: [
          { required: true, message: "请输入往来单位名称", trigger: "change" },
        ],

        spell: [
          { required: true, message: "请输入往来单位简写", trigger: "change" },
        ],
        creditNo: [
          { required: true, message: "请输入社会信用号", trigger: "change" },
        ],
      },
      editType: 0,
      editTypeMap: {
        0: "新增往来单位",
        1: "编辑往来单位",
      },
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.query = {
        key: "",
        page: 1,
        limit: 20,
      };
      this.getList();
    },
    getList() {
      this.loading = true;
      getUnitMaintain(this.query)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },

    deleteUnit(data) {
      this.loading = true;
      let tquery = {
        id: data.id + "",
      };

      deleteUnitMaintain(tquery)
        .then((response) => {
          if (response.code == 20000) {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功！",
            });
          }
        })
        .catch(() => {});
    },

    cancelDialog() {
      this.editDialogVisible = false;
    },

    handleModifyClick(row) {
      this.editType = 1;
      this.editDialogVisible = true;
      this.editQuery = row;
    },

    handleAddClick() {
      this.editType = 0;
      this.editDialogVisible = true;
      this.editQuery = {
        unitId: null,
        thirdId: null,
        name: null,
        spell: null,
        creditNo: null,
      };
      var timestamp3 = new Date().getTime();
      this.editQuery.unitId = timestamp3;
    },

    change() {
      var pinyin = require("pinyin");
      var py = pinyin(this.editQuery.name, {
        style: pinyin.STYLE_FIRST_LETTER, // 设置拼音风格
        heteronym: true,
      });
      var str = "";
      py.forEach((item) => {
        str = str + item[0];
      });
      this.editQuery.spell = str;
    },

    formSubmit() {
      this.$refs["editQuery"].validate((valid) => {
        if (valid) {
          if (this.editType == 0) {
            addUnit(this.editQuery)
              .then((response) => {
                if (response.code == 20000) {
                  this.getList();
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.cancelDialog();
                } else {
                  this.$message.error(response.message);
                }
              })
              .catch(() => {});
          } else {
            modifyUnit(this.editQuery)
              .then((response) => {
                if (response.code == 20000) {
                  this.getList();
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.cancelDialog();
                } else {
                  this.$message.error(response.message);
                }
              })
              .catch(() => {});
          }
        }
      });
    },

    deleteDialog(rowId) {
      this.$confirm("此操作将永久删除该产品信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteUnit(rowId);
        })
        .catch(() => {});
    },

    exportTxt() {},

    handleSelectionChange(val) {
      console.log("----" + val);
      this.multipleSelection = val;
    },

    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },
  },
  mounted() {},
  created() {
    this.getList();

    var pinyin = require("pinyin");
    console.log(
      pinyin("中心", {
        style: pinyin.STYLE_FIRST_LETTER, // 设置拼音风格
        heteronym: true,
      })
    );
  },
};
</script>
