<template>
  <div id="service_target">
    <el-row>
      <el-col :span="24" class="one">
        <el-col :span="24" class="one_1"> {{ title || '保安服务对象' }} </el-col>
        <el-col :span="24" class="one_2">
          <el-form ref="searchFrom" :model="searchFrom" label-width="140px">
            <el-col :span="24" class="one_2txt" v-for="(l, li) in searchFields" :key="`searchBar-line-${li}`">
              <el-col v-for="(f, fi) in l" :key="`searchBar-col-${li}-${fi}`" :span="f.span || 12">
                <el-form-item :label="f.label">
                  <template v-if="f.type === 'select'">
                    <el-select v-model="searchFrom[f.model]" filterable placeholder="请选择" clearable style="width: 100%">
                      <el-option v-for="(item, index) in getList(f.list)" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                  </template>
                  <template v-else-if="f.type === 'daterange'">
                    <e-date-range v-model="searchFrom[f.model]"></e-date-range>
                  </template>
                  <template v-else>
                    <el-input v-model="searchFrom[f.model]"></el-input>
                  </template>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24" class="one_2txt">
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini" @click="search">查询</el-button>
                <el-button size="mini" @click="clearSearch">清空</el-button>
              </el-col>
            </el-col>
          </el-form>
        </el-col>
      </el-col>

      <el-col :span="24">
        <data-table :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit"> </data-table>
      </el-col>
    </el-row>
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialog" center :destroy-on-close="true" @closed="toClose">
      <view-form :fields="getFormField()" :data="form" labelWidth="130px" :default_span="12"> </view-form>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash');
import viewForm from './util/view-form.vue';
const { baoan_sevicetype, usual } = require('@common/src/layout/deploy/dict');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('company_service_object');
export default {
  name: 'service_target',
  props: {
    title: { type: String },
  },
  components: { viewForm },
  data: function () {
    return {
      dialog: false,
      searchFrom: {},
      searchFields: [
        [
          { label: '服务对象名称', model: 'name', span: 8 },
          { label: '服务对象类型', model: 'type', type: 'select', list: 'typeList', span: 8 },
          { label: '公司归属地管辖单位', model: 'tube_company', span: 8 },
        ],
        [
          { label: '是否娱乐场所', model: 'recreation_address', span: 8 },
          { label: '合同起始时间', model: 'contract_startdate', type: 'daterange', span: 16 },
        ],
        [
          { label: '是否重点单位', model: 'key_address', span: 8 },
          { label: '合同终止时间', model: 'contract_enddate', span: 16, type: 'daterange' },
        ],
      ],
      list: [],
      total: 0,
      fields: [
        { label: '服务对象名称', model: 'name', sort: 1 },
        { label: '服务对象类型', model: 'type', sort: 2 },
        { label: '公司归属地管辖单位', model: 'tube_company', sort: 5 },
        { label: '服务单位联系人', model: 'contact', sort: 6 },
        { label: '联系电话', model: 'phone', sort: 8 },
        { label: '合同起始时间', model: 'contract_startdate', type: 'date', sort: 9 },
        { label: '合同终止时间', model: 'contract_enddate', type: 'date', sort: 10 },
        { label: '是否重点单位', model: 'key_address', type: 'select', list: 'usualList', sort: 11 },
        { label: '是否娱乐场所', model: 'recreation_address', type: 'select', list: 'usualList', sort: 12 },
        { label: '所在分局', model: 'where_branch', sort: 7 },
      ],
      formFields: [
        { label: '保安服务类型', model: 'baoan_sevicetype', span: 24, sort: 13 },
        { label: '保安公司所属县市区', model: 'household', sort: 4 },
        { label: '服务对象详址', model: 'service_address', sort: 7 },
      ],
      form: {
        baoan_sevicetype: [],
      },
      opera: [
        { label: '详情', method: 'edit' },
        // { label: '删除', type: 'danger', method: 'delete', confirm: true },
      ],
      baoan_sevicetypeList: baoan_sevicetype,
      usualList: usual,
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch']),
    async search({ skip, limit } = {}) {
      const condition = _.cloneDeep(this.searchFrom);
      const res = await this.query({ skip, limit, ...condition, company_id: this.id });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    async toEdit({ data }) {
      if (!data.id) {
        this.$message.error('未找到该数据的标识,请检查数据是否正确');
        return;
      }
      const res = await this.fetch({ id: data.id });
      if (this.$checkRes(res, null, res.errmsg || '未找到数据')) {
        let dup = _.cloneDeep(res.data);
        if (dup.baoan_sevicetype) dup.baoan_sevicetype = JSON.parse(dup.baoan_sevicetype);
        this.$set(this, `form`, dup);
      }
      this.dialog = true;
    },

    getFormField() {
      const dup1 = _.cloneDeep(this.fields);
      const dup2 = _.cloneDeep(this.formFields);
      return _.orderBy([...dup1, ...dup2], ['sort'], ['asc']);
    },
    clearSearch() {
      this.$set(this, `searchFrom`, {});
    },
    getList(listName) {
      return _.get(this, listName, []);
    },
    toClose() {
      this.$set(this, `form`, { baoan_sevicetype: [] });
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  .one_1 {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
  }
  .one_2 {
    .one_2txt {
      border: 1px solid #ccc;
      /deep/.el-form-item {
        margin: 0;
      }
      /deep/.el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
      /deep/.el-select {
        width: 100%;
      }
      .btn {
        text-align: right;
        padding: 5px 5px;
      }
    }
  }
}
</style>
