<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.developerName"
        placeholder="请输入开发商名称"
        class="filter-item"
        clearable
      ></el-input>

      <el-input
        v-model="listQuery.name"
        placeholder="请输入楼盘名称"
        class="filter-item"
        clearable
      ></el-input>

      <el-button
        class="filter-item"
        type="primary"
        @click="handleSearch"
        icon="el-icon-search"
        >搜索</el-button
      >
      <el-button
        class="filter-item"
        type="primary"
        @click="handleCreate"
        icon="el-icon-plus"
        >新建楼盘</el-button
      >
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column label="id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="开发商名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.developerName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="楼盘名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="详情" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.detail }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品房出卖人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.yiInfo1 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="法定代表人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.yiInfo2 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="地址" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.yiInfo3 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.yiInfo4 }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="180"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.type !== 0"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

    <el-dialog
      :title="textMap[dialogStatus] + '楼盘'"
      :visible.sync="dialogBuilding"
      width="30%"
    >
      <!-- :close-on-click-modal="false"
      :close-on-press-escape="false" -->
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="开发商名称">
          <el-input v-model="form.developerName"></el-input
        ></el-form-item>
        <el-form-item label="楼盘名称"
          ><el-input v-model="form.name"></el-input
        ></el-form-item>
        <el-form-item label="开发商联系方式">
          <el-input v-model="form.developerPhone"></el-input
        ></el-form-item>
        <el-form-item label="详情"
          ><el-input v-model="form.detail" type="textarea"></el-input>
        </el-form-item>
        <p>四方协议乙方信息</p>
        <el-form-item label="商品房出卖人"
          ><el-input v-model="form.yiInfo1"></el-input>
        </el-form-item>
        <el-form-item label="法定代表人"
          ><el-input v-model="form.yiInfo2"></el-input>
        </el-form-item>
        <el-form-item label="地址"
          ><el-input v-model="form.yiInfo3"></el-input>
        </el-form-item>
        <el-form-item label="电话"
          ><el-input v-model="form.yiInfo4"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogBuilding = false">取 消</el-button>
        <el-button type="primary" @click="createAndUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, update } from "@/api/building";
import Pagination from "@/components/Pagination/index";
// import { staffOptions } from "@/utils";
export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      list: [],
      listQuery: {
        current: 1,
        size: 10,
      },
      listLoading: false,
      // staffOptions,
      textMap: {
        update: "修改",
        create: "创建",
      },
      dialogStatus: "",
      dialogBuilding: false,
      rules: {
        developerName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      form: {},
    };
  },
  created() {
    // this.getBusinessList()
    this.getList();
  },
  methods: {
    getList() {
      list(this.listQuery).then((res) => {
        this.list = res.d.records;
        this.total = res.d.total;
      });
    },
    handleSearch() {
      this.listQuery.current = 1;
      this.getList();
    },
    handleCreate() {
      // this.$router.push({
      //   path: "/housing/create",
      // });
      this.dialogBuilding = true;
      this.dialogStatus = "create";
      this.form = {};
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      }, 100);
    },
    // handerDetail(row) {
    //   const { id, type } = row;
    //   this.$router.push({
    //     path: "/housing/detail",
    //     query: { id, type },
    //   });
    // },
    // 修改(提交)
    // confirm({ data, close, hideLoading }) {
    //   update(data)
    //     .then((res) => {
    //       this.$message({
    //         type: "success",
    //         message: "操作成功!",
    //       });
    //       this.$refs["table"].getList();
    //       close();
    //     })
    //     .catch(() => {
    //       hideLoading();
    //     });
    // },
    // 修改(表单显示)
    handleUpdate(row) {
      // this.formProps.title = '修改'
      // this.formProps.defaultValue = row
      // this.$refs['form'].show()
      // const { id } = row;
      // this.$router.push({
      //   path: "/staff/update",
      //   query: { id },
      // });
      this.dialogStatus = "update";
      this.dialogBuilding = true;
      this.form = Object.assign({}, row);
    },
    createAndUpdate() {
      update(this.form).then((res) => {
        if (res.c === 200) {
          this.dialogBuilding = false;
          this.$message.success(this.textMap[this.dialogStatus] + "成功");
          this.getList();
        }
      });
    },
    // 删除
    // handerDel(row) {
    //   const { name, id } = row;
    //   this.$confirm(`是否删除${name}?`, "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   }).then(() => {
    //     deleteInfo({ id }).then((res) => {
    //       this.$message({
    //         type: "success",
    //         message: "操作成功!",
    //       });
    //       this.$refs["table"].getList();
    //     });
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}
.el-select {
  margin-right: 10px;
}
</style>
