<template>
  <!-- 
    普通查询表格
    v 1.2
    2021-04-30
    Lufthafen
  -->
  <container>
    <br />
    <a-card :bordered="false">
      <yo-table
        :columns="columns"
        :load-data="loadData"
        @query="onQuery"
        @resetQuery="onResetQuery"
        ref="table"
      >
        <Auth auth="houseTask:page" slot="query">
          <!-- 此处添加查询表单控件 -->
          <!-- ... -->
          <a-form-model-item>
            <a-cascader
              :display-render="({ labels }) => labels.join(' - ')"
              :field-names="{ label: 'name', value: 'code', children: 'children' }"
              :options="options.areaTree"
              class="w-400"
              expand-trigger="hover"
              placeholder="请选择所在区域"
              v-model="query.areaCode"
            />
          </a-form-model-item>

          <a-form-model-item label="房屋性质">
            <a-radio-group @change="onChangeQueryType" button-style="solid" v-model="query.type">
              <a-radio-button value>全部</a-radio-button>
              <a-radio-button
                :key="item.code"
                :value="item.code"
                v-for="item in codes.type"
              >{{item.value}}</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="行业" v-if="query.type == 2">
            <a-select class="w-150" placeholder="请选择行业" v-model="query.industry">
              <a-select-option
                :key="item.code"
                :value="+item.code"
                v-for="item in codes.industry"
              >{{item.value}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="地址">
            <a-input placeholder="请输入地址" v-model="query.address" />
          </a-form-model-item>
          <a-form-model-item label="房屋唯一编码">
            <a-input placeholder="请输入房屋唯一编码" v-model="query.houseCode" />
          </a-form-model-item>
        </Auth>

        <!-- 格式化字段内容 -->
        <!-- ... -->
        <template slot="houseCode" slot-scope="text, record">
          <span>{{`${record.areaName}-${record.roadName}-${record.commName}-${record.note}-${`000${record.no}`.slice(-3)}`}}</span>
        </template>
        <template slot="type" slot-scope="text, record">
          <span>{{bindCodeValue(text, 'type') + (text === 2 ? `(${bindCodeValue(record.industry, 'industry')})` : '')}}</span>
        </template>
        <!-- 添加操作控件 -->
        <span slot="action" slot-scope="text, record">
          <yo-table-actions>
            <Auth auth="houseInfo:getByTaskId">
              <a
                @click="openContentWindow({
                title: '房屋表单',
                path: 'business/house/info/form',
                param: {
                    taskId:record.id
                },
              });"
              >审核</a>
            </Auth>
            <!-- 可在此处添加其他操作控件 -->
            <!-- ... -->
          </yo-table-actions>
        </span>
      </yo-table>
    </a-card>
  </container>
</template>

<script>
/* 在此管理整个页面需要的接口名称 */
const api = {
  page: 'houseTaskPage',
  /* ... */
};

export default {
  data() {
    return {
      api,

      name: '',

      /* 查询条件 */
      query: {
        type: '',
      },

      /* 表格字段 */
      columns: [
        {
          title: '房屋编码',
          dataIndex: 'houseCode',
          sorter: true,
          scopedSlots: { customRender: 'houseCode' },
          width: 300,
        },
        {
          title: '房屋性质及行业',
          dataIndex: 'type',
          sorter: true,
          scopedSlots: { customRender: 'type' },
          width: 150,
        },
        {
          title: '地址',
          dataIndex: 'address',
          sorter: true,
        },
        {
          title: '任务截止时间',
          dataIndex: 'endTime',
          sorter: true,
          width: 150,
        },
      ],

      /* 字典编码储存格式 */
      codes: {
        type: [],
        industry: [],
      },

      options: {
        areaTree: [],
      },
    };
  },

  created() {
    /** 按需加载字典编码 */
    this.onLoadCodes();
    this.onLoadAreaTree();

    /** 根据权限添加操作列 */
    const flag = this.$auth('houseInfo:getByTaskId');
    if (flag) {
      this.columns.push({
        title: '操作',
        width: '150px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
      });
    }
  },
  methods: {
    /**
     * 必要的方法
     * 传给yo-table以示意数据接口及其参数和返回的数据结构
     */
    loadData(params) {
      const query = this.$_.cloneDeep(this.query);
      const searchInfo = this.$getSearchInfo({
        query,
        queryType: { type: '=', address: 'like', houseCode: 'like' },
      });

      if (query.areaCode) {
        query.areaCode = query.areaCode[query.areaCode.length - 1];
      }

      return this.$api[api.page]({
        ...params,
        // ...query,//通过searchInfo传递查询参数
        searchInfo,
      }).then((res) => {
        return res.data;
      });
    },

    /**
     * 有查询功能时的必要方法
     * 加载数据时初始化分页信息
     */
    onQuery() {
      this.$refs.table.onReloadData(true);
    },

    /**
     * 有查询功能时的必要方法
     * 重置查询条件
     */
    onResetQuery() {
      /** 在这里重置查询条件时,可对特殊的字段做保留处理 */
      this.query = {
        type: '',
      };
      this.onQuery();
    },

    /**
     * 必要方法
     * 重新列表数据
     */
    onReloadData() {
      this.$refs.table.onReloadData();
    },

    /**
     * 必要方法
     * 加载字典数据
     * 如果不需要获取相应的字典数据,此方法内容可空
     */
    onLoadCodes() {
      this.$api
        .sysDictTypeDropDowns({ code: ['dic_house_type', 'dic_house_industry'] })
        .then(({ data: { dic_house_type, dic_house_industry } }) => {
          this.codes.type = dic_house_type;
          this.codes.industry = dic_house_industry;
        });
    },

    /**
     * 必要方法
     * 绑定数据字典值
     */
    bindCodeValue(code, name) {
      const c = this.codes[name].find((p) => p.code == code);
      if (c) {
        return c.value;
      }
      return null;
    },

    /**
     * 必要方法
     * 从列表页调用窗口的打开方法
     */
    onOpen(record) {
      this.openContentWindow({
        key: record ? record.id : 'business/house/code/form',
        title: record ? '修改房屋编码' : '新增房屋编码',
        subTitle:
          record &&
          `${record.areaName}-${record.roadName}-${record.commName}-${record.note}-${`000${record.no}`.slice(-3)}`,
        path: 'business/house/code/form',
        param: {
          record,
        },
      });
    },

    /**
     * 必要方法
     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
     */
    onResult(success, successMessage) {
      if (success) {
        this.$message.success(successMessage);
        this.onReloadData();
      }
    },

    /**
     * 必要方法
     * 删除时调用
     */
    onDelete(record) {
      this.$refs.table.onLoading();
      this.$api[api.delete](record)
        .then(({ success }) => {
          this.onResult(success, '删除成功');
        })
        .finally(() => {
          this.$refs.table.onLoaded();
        });
    },

    onLoadAreaTree() {
      return this.$api.getAreaTree().then(({ data }) => {
        this.options.areaTree = data;
      });
    },

    onChangeQueryType() {
      if (this.query.type < 2 && this.query.hasOwnProperty('industry')) {
        this.$delete(this.query, 'industry');
      }
    },
  },
};
</script>