<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-/oper/customize__homecomponent}">
      <el-form :inline="true">
          <el-form-item>
            <el-input v-model="ruleForm.name" placeholder="请输入客户名称" clearable="true"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="submitForm(ruleForm)">查询</el-button>
          </el-form-item>
      </el-form>

      <el-table :data="customerList" border style="width: 100%;">
        <el-table-column label="客户名称" header-align="center" align="center" prop="customerName"></el-table-column>
        <el-table-column label="logo" header-align="center" align="center" prop="logo">
            <template slot-scope="scope">
                <el-image style="width: 50px; height: 50px" :src="scope.row.logo" @click="addSrcList(scope.row.logo)" :preview-src-list="srcList"></el-image>
            </template>
        </el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button  type="text" size="small" @click="centerDialogVisible = true,customerize(scope.row.customerId)">功能配置</el-button>
          </template>
        </el-table-column>
      </el-table>
        <el-pagination
                :current-page="pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="pageSizeChangeHandle"
                @current-change="pageCurrentChangeHandle">
        </el-pagination>
    </div>
      <el-dialog :title="diaName" size="small" :visible.sync="centerDialogVisible">
          <p>默认功能</p>
              <el-table :data="defaultFunctionList" border style="width: 100%;" ref="defaultFunction" @selection-change="handleSelectionChangeDefault">
                  <el-table-column type="selection" header-align="center" align="center" checked="true" width="50"></el-table-column>
                  <el-table-column label="功能名称" header-align="center" align="center" prop="functionName"></el-table-column>
              </el-table>
          <p>客户定制化</p>
              <el-table :data="customizedFunctionList" border style="width: 100%;" ref="customizeFunction" @selection-change="handleSelectionChangeCustomize">
                  <el-table-column type="selection" header-align="center" align="center"  width="50"></el-table-column>
                  <el-table-column header-align="center" align="center" prop="functionName"></el-table-column>
              </el-table>
                <div style="text-align: center">
                  <el-button @click="centerDialogVisible = false">关闭</el-button>
                  <el-button type="primary" @click="saveConfig">保存</el-button>
                </div>
      </el-dialog>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      diaName: '功能配置',
      noImg: '暂无图片',
      customerList: [],
      input: '',
      centerDialogVisible: false,
      defaultFunctionList: [],
      customizedFunctionList: [],
      defaultStatus: [],
      customizeStatus: [],
      customerId: '',
      pageNo: 1,
      pageSize: 10,
      ruleForm: { name: '' },
      multiSelectedDefault: [],
      multiSelectedCustomize: [],
      defaultForm: [],
      customizeForm: [],
      total: '',
      srcList: []
    }
  },
  components: {

  },
  created () {
    this.queryCustomerList()
  },
  methods: {
    queryCustomerList () {
      let params = {
        customerName: '',
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$http.post('/oper/crm/customer/pagequery', params).then(({ data: res }) => {
        if (res.code === 0) {
          this.customerList = res.data.list
          this.total = res.data.total
        }
      })
    },
    submitForm (formName) {
      let params = {
        customerName: formName.name,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$http.post('/oper/crm/customer/pagequery', params).then(({ data: res }) => {
        if (res.code === 0) {
          this.customerList = res.data.list
        }
      })
    },
    customerize (id) {
      this.customerId = id
      let params = {
        customerId: id
      }
      this.$http.post('/oper/customize/customerfunction/customerfunctionlist', params).then(({ data: res }) => {
        if (res.code === 0) {
          this.defaultFunctionList = res.data.defaultFunctionList
          this.$nextTick(() => {
            this.defaultFunctionList.forEach(fun => {
              if (fun.flag === true) {
                this.$refs.defaultFunction.toggleRowSelection(fun)
              }
            })
          })
          this.customizedFunctionList = res.data.customizedFunctionList
          this.$nextTick(() => {
            this.customizedFunctionList.forEach(fun => {
              if (fun.flag === true) {
                this.$refs.customizeFunction.toggleRowSelection(fun)
              }
            })
          })
        }
      })
    },
    saveConfig () {
      if (this.multiSelectedDefault.length !== 0) {
        this.multiSelectedDefault.forEach(defaultFun => {
          this.defaultForm.push(defaultFun.functionId)
        })
      }
      if (this.multiSelectedCustomize.length !== 0) {
        this.multiSelectedCustomize.forEach(customizeFun => {
          this.customizeForm.push(customizeFun.functionId)
        })
      }
      if (this.defaultForm.length === 0) {
        this.$message({
          type: 'warning',
          message: '至少保留一个默认功能'
        })
        return
      }
      let params = {
        'customerId': this.customerId,
        'defaultFunctionList': this.defaultForm,
        'customizedFunctionList': this.customizeForm
      }
      this.$http.post('/oper/customize/customerfunction/savecustomerfunction', params).then(({ data: res }) => {
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
        } else {
          this.$message({
            type: 'warning',
            message: '保存失败'
          })
        }
        this.centerDialogVisible = false
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '保存失败'
        })
      })
      this.defaultForm = []
      this.customizeForm = []
    },
    pageCurrentChangeHandle (val) {
      this.pageNo = val
      this.queryCustomerList()
    },
    pageSizeChangeHandle (val) {
      this.pageSize = val
      this.queryCustomerList()
    },
    handleSelectionChangeDefault (val) {
      this.multiSelectedDefault = val
    },
    handleSelectionChangeCustomize (customizeVal) {
      this.multiSelectedCustomize = customizeVal
    },
    addSrcList (url) {
      this.srcList = []
      this.srcList.push(url)
    }
  }
}
</script>
