<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-select
          v-model="query.type"
          filterable
          size="small"
          placeholder="请选择类型"
          class="filter-item"
          style="width: 160px"
          @change="queryAndEdit"
        >
          <el-option
            v-for="item in optionsObj.ConfigureType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <crudOperation :permission="permission"></crudOperation>
    </div>
    <!--表单组件-->
    <el-form :rules="rules" size="middle" label-width="230px">
      <el-form-item v-for="item in configureDatas" :key="item.id" :label="item.description" >
        <el-row>
          <el-col :span="6"><el-input  type="text" v-model="item.value"></el-input></el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" align="center" class="dialog-footer">
      <el-button :loading="crud.status.cu === 2" type="primary" @click="submitConfigure"
        >保存配置</el-button>
    </div>
  </div>
</template>

<script>
import permission from '@/directive/permission'
import crudConfigure,{ getListJson,edit } from '@/api/system/configure'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import { getOptions } from '@/api/system/public'

// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import { configureTableOptions } from '../tableConfig'
import { getToken } from '@/utils/auth'

const defaultForm = {
  id:'',
  description:'',
  value:''
}

export default {
  name: 'Configure',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps },
  cruds() {
    return CRUD({
      title: '配置',
      url: 'system/configure/getListJson',
      listOrder: [],
      optShow:{add: false, edit: false, del: false, download: false, reset: false},
      crudMethod: { ...crudConfigure },
    })
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API
    }
  },
  data() {
    return {
      configureTableOptions,
      viewLoading: false,
      permission: {
        add: ['admin', 'configure:add'],
        edit: ['admin', 'configure:edit'],
      },
      rules: {
        description: [{ required: true, message: '请输入描述内容', trigger: 'blur' }],
        value: [{ required: true, message: '请选择数据内容', trigger: 'blur' }],
      },
      optionsObj: {
        ConfigureType: [],
      },
      token: getToken() ?? '',
      configureDatas:[]
    }
  },
  created() {
    this.getOptions()
    
  },
  methods: {
    getOptions() {
      Object.keys(this.optionsObj).forEach(async key => {
        try {
          let res = await getOptions(key)
          if (res.code === 20000) this.optionsObj[key] = res.data.content
          if(key === 'ConfigureType'){
            this.query.type = this.optionsObj[key][0].value
            this.queryAndEdit(this.query.type)
          }
        } catch (error) {
          console.log(error)
        }
      })
    },
    async queryAndEdit(type){
      try {
        let res = await getListJson({'type':type})
        let data = res.data.content
        this.configureDatas = data.map(item => {
          return{
            id:item.id,
            name:item.name,
            description: item.description, // 配置描述
            type: item.type, // 配置描述
            typeStrStr: item.typeStr, // 配置描述
            datatype: item.dataType, // 配置描述
            dataTypeStr: item.dataTypeStr, // 配置描述
            value:item.value // 数据内容
          }
        })
        //console.log(this.configureDatas);
      } catch (error) {
        console.log(error);
      }
    },
    async submitConfigure(){
      if (this.configureDatas.length>0) {
        let res = await edit(this.configureDatas)
        if (res.code === 20000){
          this.$message.success('配置成功！')
        }else{
          this.$message.error('配置失败！')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
