<template>
  <template-page
    ref="pageRef"
    :get-list="getList"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :options-evens-group="optionsEvensGroup"
    :moreParameters="moreParameters"
    :column-parsing="columnParsing"
    :exportList="exportList"
    :operation="operation()"
  >
    <div class="cartographer_big">
      <el-dialog title="配置" width="100%" :modal="false" :visible.sync="formDialog" :before-close="formDialogClose">
        <zj-page-container v-if="formDialog">
          <zj-page-fill class="neibuview">
            <zj-form-container ref="formRef" :form-data="formData" :form-attributes="{ size: 'mini' }">
              <zj-form-module title="配置信息" label-width="90px" :form-data="formData" :form-items="formItems">
              </zj-form-module>
            </zj-form-container>
          </zj-page-fill>
          <div>
            <div style="box-sizing: border-box; padding: 10px">
              <el-button size="mini" @click="formDialogClose">关闭</el-button>
              <el-button size="mini" type="primary" @click="queding">确定</el-button>
            </div>
          </div>
        </zj-page-container>
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { dispatchList, dispatchListExport, dispatchSave } from '@/api/unallocatedStreet'
import operation_mixin from '@/components/template/operation_mixin.js'
import { getDepartmentList } from '@/api/setting'
export default {
  components: { TemplatePage },
  mixins: [operation_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formData: {},
      formDialog: false,
      dataList: []
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return [
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: ''
          },
          formItemAttributes: {
            label: '选择省份',
            prop: 'provinceName',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: ''
          },
          formItemAttributes: {
            label: '选择城市',
            prop: 'cityName',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: ''
          },
          formItemAttributes: {
            label: '选择区域',
            prop: 'areaName',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: ''
          },
          formItemAttributes: {
            label: '选择街道',
            prop: 'streetName',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: ''
          },
          formItemAttributes: {
            label: '工单渠道',
            prop: 'dictValue',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: ''
          },
          formItemAttributes: {
            label: '工单类型',
            prop: 'orderSmallTypeText',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: ''
          },
          formItemAttributes: {
            label: '产品大类',
            prop: 'categoryName',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: {
            disabled: true,
            placeholder: ''
          },
          formItemAttributes: {
            label: '工单来源',
            prop: 'orderSource',
            rules: [...required]
          }
        },
        {
          name: 'el-select',
          md: 6,
          options: this.dataList,
          attributes: {
            placeholder: '请选择',
            clearable: true,
            filterable: true
          },
          formItemAttributes: {
            label: '网点',
            prop: 'websitId',
            rules: [...required]
          },
          events: {
            change: val => {
              if (val) {
                this.formData.websitName = this.dataList.find(item => item.value == val).label
              } else {
                this.formData.websitName = ''
              }
            }
          }
        }
      ]
    }
  },
  methods: {
    // 列表请求函数
    getList(p, cb) {
      try {
        var pam = JSON.parse(JSON.stringify(p))
        cb && cb(pam)
        return dispatchList(pam)
      } catch (error) {
        console.log(error)
      }
    },
    // 列表导出函数
    exportList: dispatchListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return this.operationBtn({
        config: {
          click: ({ row, index, column }) => {
            var list_ = []
            function dg(list, pname = []) {
              for (let { children, name, ...item } of list) {
                list_.push({ ...item, name: name, pname: [...pname] })
                if (children && children.length) dg(children, [...pname, name])
              }
            }
            getDepartmentList().then(res => {
              dg(res.data)
              this.dataList = [...list_]
                .filter(item => {
                  return item.type === 'C'
                })
                .map(item => {
                  return {
                    label: item.name,
                    value: item.websitId
                  }
                })
              this.formData = { ...row, websitId: '', websitName: '' }
              this.$nextTick(() => {
                this.formDialog = true
              })
            })
          }
        }
      })
    },
    formDialogClose() {
      this.formDialog = false
      this.formData = {}
    },
    queding() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          dispatchSave(this.formData).then(res => {
            this.$message({ type: 'success', message: `配置成功!` })
            this.$refs.pageRef.refreshList()
            this.formDialogClose()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep & > .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    & > div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>
