<template>
  <div class="flex-column">
    <a-form-model ref="form">
      <div class="card-bg">
        <a-form-model-item label="编号">
          <a-input v-model="pagingQuery.code" />
        </a-form-model-item>
        <div style="width: 20px"></div>
        <a-form-model-item label="单位名称">
          <a-input v-model="pagingQuery.name" />
        </a-form-model-item>
        <div style="width: 40px"></div>

        <div style="align-self: center" class="btn1" @click="search">查询</div>

        <a-button
          style="align-self: center"
          class="btn1 reset"
          @click="resetAction"
        >
          重置
        </a-button>
      </div>
    </a-form-model>

    <div class="card-bg flex-column" style="padding: 10px 0px">
      <div class="header">
        <Title title="单位列表" class="title-margin" />
        <div class="header-btn">
          <div class="add" @click="addAction">新建</div>
          <div class="export" @click="exportAction">导出</div>
        </div>
      </div>
      <a-table
        size="small"
        :columns="columns"
        :data-source="pagingData.list"
        rowKey="id"
        :pagination="paginationOpt"
      >
        <span slot="action" slot-scope="record">
          <a-button
            type="primary"
            size="small"
            style="font-size: 8px"
            @click="editInfoAction(record)"
            >编辑</a-button
          >

          <a-popconfirm
            title="确认删除该条记录?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteAction(record)"
          >
            <a-button
              type="primary"
              danger
              size="small"
              style="
                font-size: 10px;
                background: #ec3535;
                border: none;
                margin-left: 10px;
              "
              >删除</a-button
            >
          </a-popconfirm>
        </span>

        <span slot="online" slot-scope="record">
          <a-switch
            :checked="record.online == 1"
            @click="onlineClcikAction(record)"
          />
        </span>
      </a-table>
    </div>

    <a-modal
      :visible="visible"
      :title="isEdit ? '编辑信息' : '新建单位'"
      @ok="handleSubmit"
      @cancel="modalCancel"
    >
      <a-form-model
        ref="companyForm"
        :model="formState"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        autocomplete="off"
        :rules="rules"
      >
        <a-form-model-item
          style="margin-top: 10px"
          label="单位名称"
          prop="name"
        >
          <a-input v-model="formState.name" placeholder="请输入单位名称" />
        </a-form-model-item>

        <a-form-model-item
          style="margin-top: 10px"
          label="单位地址"
          prop="address"
        >
          <a-input v-model="formState.address" placeholder="请输入单位名称" />
        </a-form-model-item>

        <a-form-model-item
          style="margin-top: 10px"
          label="是否上线"
          name="online"
        >
          <a-switch
            :checked="formState.online == 1"
            @click="onlineFormAction"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import Title from "@/components/layouts/Title";
import {
  getPage,
  add,
  modify,
  deleteApi,
  exportData,
} from "@/api/system/sysCompany";

export default {
  components: {
    Title,
  },
  data() {
    return {
      paginationOpt: {
        current: 1,
        total: 0,
        showQuickJumper: true,
        size: "small",
        onChange: (page) => this.onPageChange(page),
      },
      visible: false,
      isEdit: false,
      rules: {
        name: [{ required: true, message: "请输入单位名称" }],
        address: [{ required: true, message: "请输入单位地址" }],
      },
      formState: {
        name: "",
        address: "",
        online: 1,
        id: 0,
      },
      columns: [
        { title: "编号", dataIndex: "id" },
        { title: "单位名称", ellipsis: true, dataIndex: "name" },
        { title: "地址", ellipsis: true, dataIndex: "address" },
        { title: "创建时间", ellipsis: true, dataIndex: "ctDate" },
        {
          title: "上线状态",
          ellipsis: true,
          scopedSlots: { customRender: "online" },
        },
        {
          title: "操作",
          key: "operation",
          scopedSlots: { customRender: "action" },
        },
      ],
      // 必须叫这个名字
      pagingQuery: {
        name: "",
        page: 1,
        code: "",
      },
      // 必须叫这个名字
      pagingData: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onPageChange(page) {
      this.paginationOpt.current = page;
      this.getList();
    },
    newCarApply() {
      this.$router.push({ name: "newcarapply" });
    },
    search() {
      this.getList(true);
    },

    onlineClcikAction(record) {
      let online = record.online == 1 ? 0 : 1;
      modify({ online: online, id: record.id }).then((res) => {
        if (res.code == 200) {
          record.online = online;
        }
        this.$notification.success({
          message: "系统提示",
          description: res.msg,
          duration: 4,
        });
      });
    },
    modifyHttp() {
      modify(this.formState).then((res) => {
        if (res.code == 200) {
          this.resetAction();
        }
        this.$notification.success({
          message: "系统提示",
          description: res.msg,
          duration: 4,
        });
        this.visible = false;
      });
    },
    onlineFormAction() {
      let online = this.formState.online;
      this.formState.online = online == 1 ? 0 : 1;
    },

    addAction() {
      this.visible = true;
      this.isEdit = false;
      this.formState.name = "";
      this.formState.address = "";
      this.formState.online = 1;
    },
    modalCancel() {
      this.visible = false;
    },
    handleSubmit() {
      this.$refs.companyForm.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            this.modifyHttp();
          } else {
            this.handleSubmitHttp();
          }
        } else {
          return false;
        }
      });
    },
    handleSubmitHttp() {
      add(this.formState).then((res) => {
        if (res.code == 200) {
          this.getList(true);
          this.visible = false;
        }
        this.$notification.success({
          message: "系统提示",
          description: res.msg,
          duration: 4,
        });
      });
    },
    resetAction() {
      this.pagingQuery.name = "";
      this.pagingQuery.code = "";
      this.getList(true);
    },
    editInfoAction(record) {
      this.isEdit = true;

      this.formState.name = record.name;
      this.formState.address = record.address;
      this.formState.online = record.online;
      this.formState.id = record.id;

      this.visible = true;
    },
    deleteAction(record) {
      deleteApi(record.id).then((res) => {
        if (res.code == 200) {
          this.getList(true);
        }
        this.$notification.success({
          message: "系统提示",
          description: res.msg,
          duration: 4,
        });
      });
    },
    getList(refresh) {
      if (refresh) {
        this.paginationOpt.current = 1;
      }
      let param = {
        page: this.paginationOpt.current,
        size: 10,
        code: this.pagingQuery.code,
        name: this.pagingQuery.name,
      };
      getPage(param).then((res) => {
        if (res.code == 200) {
          if (this.paginationOpt.current == 1) {
            this.pagingData = res.data;
          } else {
            this.pagingData.list = this.pagingData.list.concat(res.data.list);
          }
          this.paginationOpt.total = res.data.total;
        }
      });
    },
    exportAction() {
      exportData().then(res=>{
         let fileDownload = require('js-file-download')
         fileDownload(res.data,"全部单位.xlsx");
      });
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .ant-form-item {
  margin-bottom: 0px;
}

::v-deep .ant-row {
  display: flex;
  align-items: center;
}

.reset {
  background: #e5e6eb;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #7d8592;
  margin-left: 20px;
}

::v-deep .ant-table-pagination.ant-pagination {
  margin-right: 20px;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.add {
  width: 80px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #3a62d7;
  font-size: 10px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #3a62d7;
  text-align: center;
  line-height: 30px;
  margin-right: 20px;
}

.add:hover {
  cursor: pointer;
}

.export {
  width: 80px;
  height: 30px;
  background: #3a62d7;
  border-radius: 15px;
  font-size: 10px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 30px;
  margin-right: 20px;
}
.export:hover {
  cursor: pointer;
}

.header-btn {
  display: flex;
  flex-direction: row;
}
</style>
