<template>
  <div id="company_service_area">
    <el-row :gutter="10">
      <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" @material="toMaterial"> </data-table>
      </el-col>
    </el-row>
    <el-dialog title="保安服务区域信息" :close-on-click-modal="false" :visible.sync="dialog" center :destroy-on-close="true" @closed="toClose">
      <view-form :fields="getFormField()" :data="form" labelWidth="130px"> </view-form>
    </el-dialog>
    <el-dialog title="管理人电子资料" :close-on-click-modal="false" :visible.sync="mDialog" center :destroy-on-close="true" @closed="toClose">
      <m-upload :basic_id="form.id" :uri="`/files/baoan/company_area_${form.id}_material/upload`" :noUpload="true"></m-upload>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash');
import viewForm from './util/view-form.vue';
import mUpload from './util/m-upload.vue';
const { baoan_sevicetype } = require('@common/src/layout/deploy/dict');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('company_service_area');
export default {
  name: 'company_service_area',
  props: {
    title: { type: String },
  },
  components: { mUpload, viewForm },
  data: function () {
    return {
      dialog: false,
      mDialog: false,
      searchFrom: {},
      searchFields: [
        [
          { label: '区域名称', model: 'service_name', span: 8 },
          { label: '区域详址', model: 'address_detailed', span: 8 },
          { label: '区域省市县', model: 'onhouse_city', span: 8 },
        ],
        [
          { label: '区域负责人姓名', model: 'name', span: 8 },
          { label: '区域负责人联系电话', model: 'phone', span: 8 },
          { label: '区域负责人身份证号', model: 'card', span: 8 },
        ],
      ],
      list: [],
      total: 0,
      fields: [
        { label: '区域名称', model: 'service_name', sort: 1, span: 24 },
        { label: '区域详址', model: 'address_detailed', sort: 2, span: 24 },
        { label: '负责人姓名', model: 'name', sort: 4 },
        { label: '负责人身份证号', model: 'card', sort: 5, options: { maxLength: 18 } },
        { label: '联系电话', model: 'phone', sort: 6 },
      ],
      formFields: [
        { label: '区域省市县', model: 'onhouse_city', sort: 3 },
        { label: '区域负责人职务', model: 'zw', sort: 7 },
        { label: '服务类型', model: 'baoan_sevicetype', sort: 8, span: 24, type: 'checkbox', list: 'baoan_sevicetypeList' },
      ],
      opera: [
        { label: '详情', method: 'edit' },
        { label: '资料管理', method: 'material' },
      ],
      form: {
        baoan_sevicetype: [],
      },
      rules: {},
      // 申请保安服务内容
      baoan_sevicetypeList: baoan_sevicetype,
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update']),
    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);
        console.log(dup);
        this.$set(this, `form`, dup);
      }
      this.dialog = true;
    },
    getList(listName) {
      return _.get(this, listName, []);
    },
    clearSearch() {
      this.$set(this, `searchFrom`, {});
    },
    getFormField() {
      const dup1 = _.cloneDeep(this.fields);
      const dup2 = _.cloneDeep(this.formFields);
      let fields = [...dup1, ...dup2];
      fields = _.orderBy(fields, ['sort'], ['asc']);
      return fields;
    },
    toClose() {
      this.$set(this, `form`, { baoan_sevicetype: [] });
    },
    toMaterial({ data }) {
      this.$set(this, 'form', data);
      this.mDialog = true;
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</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>
