<template>
  <div class="app-container">
    <search-time @searchList="getList">
      <span slot="CRUD-btn" class="CRUD-btn">
        <el-button v-for="(item,index) in selectArr" :key="index" class="selectbtn" size="small" :type="item.type" @click="controlFun(index)">{{ item.name }}</el-button>
      </span>
      <span slot="searchSelect">
        <el-select v-model="listQuery.type" placeholder="类型" clearable class="filter-item" style="width: 130px">
          <el-option
            v-for="item in calendarTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
    </search-time>
    <super-table class="tableSpace" :table="secTable" :tableface="secTableface" :config="config" @lookInfo="popDetails" @getSelect="getSelect" />
    <!--分页-->
    <pagination
      :v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
    <!--e_char弹窗-->
    <el-dialog
      :title="outerTitle"
      :close-on-click-modal="false"
      :visible.sync="outerVisible"
      width="1163px"
    >
      <!--添加的弹窗-->
      <div v-if="switchShow === 0">
        <form-com :formface="secformface" :form="secform" />
      </div>
      <div v-if="switchShow === 1">
        <!--添加的弹窗-->
        <div style="overflow: hidden; margin-bottom: 20px">
          <span class="fr">
            <el-button icon="el-icon-plus" type="primary" plain size="mini" @click="fieldAddBtn">新增</el-button>
            <el-button icon="el-icon-edit" type="primary" plain size="mini" @click="fieldAlterBtn">修改</el-button>
            <el-button icon="el-icon-edit" type="primary" plain size="mini" @click="fielddelBtn">删除</el-button>
          </span>
        </div>
        <super-table :table="field" :tableface="fieldface" :config="tableconfig" @getSelect="getSelect" />
        <el-dialog
          width="80%"
          :close-on-click-modal="false"
          :title="innerTitle"
          :visible.sync="innerVisible"
          append-to-body
        >
          <form-com :formface="fieldfacefrom" :form="fieldform" :config="fieldconfig" />
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitInner">确定</el-button>
            <el-button type="danger" @click="innerVisible = false">取消</el-button>
          </div>
        </el-dialog>
      </div>
      <div v-if="switchShow === 3">
        <form-com :formface="synchronousFormFace" :form="synchronousForm" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button type="danger" @click="outerVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pageMaintenanceApi from '../components/js/form-maintenance';
import searchTime from '../components/components-items/search-time'
import superTable from '../components/components-items/super-table'
import pagination from '../components/components-items/pagination'

export default {
  name:"page-MaintenanceApi",
  components:{
    searchTime,
    superTable,
    pagination
  },
  // 不要删除这个路由钩子事件,它们是路由跳转自动执行的
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave')
    next()
  },
  data() {
    return {
      calendarTypeOptions: [{
        value: '选项1',
        label: '页面名称'
      }, {
        value: '选项2',
        label: '页面中文名称'
      }, {
        value: '选项3',
        label: '对象名称'
      }],
      value: '',
      switchShow: '', // 切换展示
      switchSubmit: '', // 外弹窗的切换提交
      switchSubmitInner: '', // 内弹窗的切换提交
      outerVisible: false, // 控制外弹窗,
      innerVisible: false, // 控制内弹窗
      outerTitle: '弹窗标题', // 控制弹窗
      innerTitle: '内弹窗标题', // 内弹窗标题
      selectTab: [], // 选中的table行
      fieldform: {}, // 内部弹窗对象
      fieldface: [
        { chinese: '控件顺序', english: 'controlorder', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '控件名', english: 'controlname', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '控件标题', english: 'controlcaption', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '是否组合', english: 'isgroup', enabled: false, controltype: 'switch', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '组合的字段', english: 'groupfield', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '控件类型', english: 'controltype', enabled: false, controltype: 'select', sourcedata: [{ label: '单行输入', value: 'input' }, { label: '时间', value: 'date' }, { label: '时间区间', value: 'daterange' }, { label: '下拉选择', value: 'select' }, { label: '级联选择器', value: 'cascader' }, { label: 'switch切换', value: 'switch' }, { label: '多行文本', value: 'textarea' }, { label: '图片上传', value: 'imageUpload' }, { label: '证件上传', value: 'papersUpload' }], verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '控件所需数组', english: 'arr', enabled: false, controltype: 'input', verify: { required: 'false', msg: '页面名称必填' }},
        { chinese: '输入框里面的文字', english: 'placeholder', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '必填项', english: 'require', enabled: false, controltype: 'switch', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '必填项的提示信息', english: 'msg', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '输入框下方说明', english: 'explain', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '是否可修改', english: 'enabled', enabled: false, controltype: 'switch', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '数据来源', english: 'sourcedata', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '接口地址', english: 'interfaceaddress', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '所属企业ID', english: 'cid', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }}
      ],
      fieldfacefrom: [],
      fieldId: '',
      cid: '',
      field: [],
      fieldconfig: {
        labelWidth: '150px',
        labelPosition: 'right'
      },
      selectArr: [ // 左上角按钮
        { name: '新增', type: 'primary' },
        { name: '修改', type: 'warning' },
        { name: '删除', type: 'danger' },
        { name: '同步', type: 'primary' }
      ],
      secTable: [],
      secTableface: [ // 表格显示数据 后端传
        { chinese: '页面名称', english: 'pagenameens', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '页面中文名', english: 'pagename', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '页面中文名必填' }},
        { chinese: '接口地址', english: 'interfaceaddress', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '接口地址必填' }},
        { chinese: '对象名称', english: 'objectname', enabled: false, controltype: 'input', verify: { required: 'ture', msg: '对象名称必填' }},
        { chinese: '对象类型', english: 'objecttype', enabled: false, controltype: 'select', sourcedata: [{ label: 'form', value: 'form' }, { label: 'table', value: 'table' }], verify: { required: 'ture', msg: '对象类型必填' }}
      ],
      config: { // 前端定义
        height: 'calc(100vh - 350px)',
        table: [
          { index: '0', width: '200', align: 'left' },
          { index: '1', width: '120', align: 'left' },
          { index: '2', width: '120', align: 'left' },
          { index: '3', align: 'left' },
          { index: '4', align: 'left' },
          { index: '5', align: 'left' },
          { index: '6', align: 'left' }
        ]
      },
      secform: {},
      secformface: [],
      fileList: [], // 上传的图片列表
      total: 12, // 总分页数
      switchDialogCon: '',
      listLoading: true, // 控制列表加载动画化
      listQuery: { // 查询条件
        searchTxt: '',
        pageIndex: 0,
        pageSize: 10,
        sidx: '' // 排序字段
      },
      tableconfig: {
        height: 'calc(100vh - 400px)'
      },
      downloadLoading: false, // 控制下拉加载状态
      synchronousFormFace: [
        { chinese: '选择数据库', english: 'pagenameens', enabled: false, controltype: 'select', sourcedata: [{ label: 'dbo', value: 'dbo' }], verify: { required: 'ture', msg: '页面名称必填' }},
        { chinese: '选择表', english: 'pagename', enabled: false, controltype: 'select', sourcedata: [], verify: { required: 'ture', msg: '页面名称必填' }}
      ],
      synchronousForm: {}
    }
  },
  created() {
    this.getPageConfig()
    this.getList()
  },
  methods: {
    // 获取选中
    getSelect(e) {
      console.log('e', e)
      this.selectTab = e
    },
    // 内弹窗的确定
    submitInner() {
      console.log('this.switchSubmitInner', this.switchSubmitInner)
      // 0 是添加 1是修改
      if (this.switchSubmitInner === 0) {
        pageMaintenanceApi.addFiled(this.fieldform).then(response => {
          console.log('response.result', response)
          const { code, msg, result } = response
          if (Object.is(code, 1)) {
            this.innerVisible = false
            this.$message.success('添加成功')
            this.getfiledList(this.fieldId)
          } else {
            this.$message.error(msg)
          }
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      } else if (this.switchSubmitInner === 1) {
        const data = JSON.stringify(this.fieldform)
        console.log(data)
        pageMaintenanceApi.updateFiled(this.fieldform).then(response => {
          const { code, msg, result } = response
          if (Object.is(code, 1)) {
            this.innerVisible = false
            this.$message.success('修改成功')
            this.getfiledList(this.fieldId)
          } else {
            this.$message.error(msg)
          }
          console.log('response.result', response.result)
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }
    },
    // 删除字段
    fielddelBtn() {
      if (this.selectTab.length !== 0) {
        var arr = []
        this.selectTab.forEach(s => arr.push(s.id))
        console.log('arr', arr)
        this.$confirm('删除该内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          pageMaintenanceApi.delFiled(arr).then(response => {
            const { code, msg, result } = response
            if (Object.is(code, 1)) {
              this.$message.success('删除成功')
              this.getfiledList(this.fieldId)
            } else {
              this.$message.error(msg)
            }
            console.log('response.result', response.result)
            setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
          })
        })
      } else {
        this.$message.error('请选择一条来删除')
      }
    },
    // 内弹窗修改
    fieldAlterBtn() {
      var that = this
      if (Object.is(this.selectTab.length, 1)) {
        this.innerTitle = '修改字段详情'
        this.innerVisible = true
        this.switchSubmitInner = 1
        this.fieldfacefrom.map(s => s.enabled = true)
        this.fieldform = this.selectTab[0]
      } else {
        that.$message.error('请选择一条来修改')
      }
    },
    // 新增字段
    fieldAddBtn() {
      this.innerVisible = true
      this.innerTitle = '添加字段'
      this.switchSubmitInner = 0
      this.fieldform = {}
      this.fieldfacefrom.map(s => s.enabled = true)
      this.fieldform.syspageid = this.fieldId
      this.fieldform.t_system_setid = this.fieldId
      this.fieldform.cid = this.cid
      console.log('this.fieldform', this.fieldform)
    },
    // 获取页面配置
    getPageConfig() {
      this.getField()
      if(Object.is(this.href, '')){
        return
      }
      pageMaintenanceApi.getPageConfig({}, this.href).then(response => {
        console.log('response', response)
        const { code, msg, result, count } = response
        if (Object.is(code, 1)) {
          console.log('result', result)
          this.secformface = result
        } else {
          this.$message.error(msg)
        }
        console.log('this.form', this.form)
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 删除页面对象
    delfun(ids) {
      this.getField()
      pageMaintenanceApi.delByIdList(ids, this.href).then(response => {
        console.log('response', response)
        const { code, msg } = response
        if (Object.is(code, 1)) {
          this.$message.success('删除成功')
          this.outerVisible = false
          this.getList('')
        } else {
          this.$message.error(msg)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 保存
    submit() {
      // 0 是添加 1是修改  2是同步
      if (this.switchSubmit === 0) {
        console.log('add', this.secform)
        pageMaintenanceApi.add(this.secform, this.href).then(response => {
          console.log('response.result', response.result)
          const { code, msg, result } = response
          if (Object.is(code, 1)) {
            this.outerVisible = false
            this.$message.success('添加成功')
            this.getList()
          } else {
            this.$message.error(msg)
          }
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      } else if (this.switchSubmit === 1) {
        pageMaintenanceApi.update(this.secform, this.href).then(response => {
          const { code, msg, result } = response
          if (Object.is(code, 1)) {
            this.outerVisible = false
            this.$message.success('修改成功')
            this.getList()
          } else {
            this.$message.error(msg)
          }
          console.log('response.result', response.result)
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      } else if (this.switchSubmit === 3) {
        this.synchronous(this.synchronousForm.pagename)
      }
    },
    //  上传图片
    uploadSuccess(res) {
      console.log('res', res)
      // this.fileList = this.custom_config.FILES_URL + res[0]
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    // 上传图片之前先判断图片大小尺寸
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    //  弹出详情
    popDetails(row) {
      this.getField()
      console.log('row', row)
      this.fieldId = row.id
      this.cid = row.cid
      this.switchShow = 1
      this.fieldfacefrom = JSON.parse(JSON.stringify(this.fieldface))
      this.getfiledList(this.fieldId)
    },
    // 列表操作方法
    controlFun(e) {
      this.secformface = JSON.parse(JSON.stringify(this.secTableface))
      this.switchSubmit = e
      this.switchShow = 0
      if (Object.is(e, 0)) {
        this.secform = {}
        this.outerTitle = '添加页面对象'
        this.secformface.map(s => s.enabled = true)
        this.outerVisible = true
        // 通过id获取详情
      } else if (e === 1) {
        if (this.selectTab.length === 1) {
          this.outerTitle = '修改页面对象'
          this.outerVisible = true
          this.secformface.map(s => s.enabled = true)
          this.secform = this.selectTab[0]
        } else {
          this.$message.error('只能选择一个修改')
        }
      } else if (e === 2) {
        this.outerTitle = '删除科室信息'
        const arr = []
        this.selectTab.forEach(s => arr.push(s.id))
        this.$confirm('删除该内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delfun(arr)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else if (e === 3) {
        if (this.selectTab.length === 1) {
          this.outerTitle = '选择同步的数据库和表'
          this.switchShow = e
          this.outerVisible = true
          this.synchronousFormFace.map(s => s.enabled = true)
          this.getSynchronousList()
        } else {
          this.$message.error('只能选择一个来同步')
        }
      }
    },
    // 获取同步数据库的下拉选择
    getSynchronousList() {
      pageMaintenanceApi.getSynchronousList({}).then(response => {
        const { code, msg, result } = response
        if (Object.is(code, 1)) {
          const newarr = []
          for (const arrKey in result) {
            newarr.push({ label: result[arrKey], value: result[arrKey] })
          }
          this.synchronousFormFace[1].sourcedata = newarr
          console.log('this.synchronousFormFace[1]', this.synchronousFormFace[1])
        } else {
          this.$message.error(msg)
        }
        console.log('response.result', response.result)
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 提交同步
    synchronous(name) {
      if (this.selectTab.length === 1) {
        const id = this.selectTab[0].id
        console.log('name', name)
        pageMaintenanceApi.synchronous({}, name, id).then(response => {
          const { code, msg, result } = response
          if (Object.is(code, 1)) {
            this.$message.success('同步成功')
          } else {
            this.$message.error(msg)
          }
          console.log('response.result', response.result)
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      } else {
        this.$message.error('只能选择一个同步')
      }
    },
    // 获取字段列表数据
    getfiledList(id) {
      pageMaintenanceApi.getById({}, this.href, id).then(response => {
        const { code, msg, result } = response
        if (Object.is(code, 1)) {
          this.outerTitle = '字段详情'
          this.outerVisible = true
          console.log('result', result)
          this.field = result.details
          console.log('this.fieldform.t_system_setid', this.fieldform.t_system_setid)
          this.fieldface.map(s => s.enabled = false)
        } else {
          this.$message.error(msg)
        }
        console.log('response.result', response.result)
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 获取路径的变量
    getField() {
      console.log('this.href', this.href)
      var that = this
      this.href = ''
      console.log('this.href', this.href)
      var h = window.location.href
      var st = 'tablename='
      var i = h.indexOf(st)
      console.log('i', i)
      if (i !== -1) {
        var L = st.length
        var s = h.substr(i + L)
        that.href = s
        console.log('this.href', s)
        console.log('this.href12', this.href)
      }
    },
    // 获取页面名
    // getPageName() {
    //   var that = this
    //   this.href = ''
    //   var h = window.location.href
    //   var st = '/'
    //   var i = h.lastIndexOf(st)
    //   console.log('i', i)
    //   if (i !== -1) {
    //     var L = st.length
    //     var s = h.substr(i + L)
    //     that.href = s
    //     console.log('this.href', s)
    //     console.log('this.href12', this.href)
    //   }
    // },
    // 获取产品列表
    getList() {
      this.getField()
      if(Object.is(this.href, '')){
        return
      }
      pageMaintenanceApi.getList({}, this.href).then(response => {
        console.log('response', response)
        const { code, msg, result, count } = response
        if (Object.is(code, 1)) {
          this.secTable = result
          this.total = count
        } else {
          this.$message.error(msg)
        }
        console.log('this.form', this.form)
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 改变页数时
    handleCurrentChange(val) {
      // this.params.pageNum = val
      this.listQuery['Page.Index'] = val
      this.getList()
    },
    // 条件查询
    handleFilter() {
      this.listQuery['Page.Index'] = 1
      console.log('this.listQuery', this.listQuery)
      this.getList()
    }
  }
}
</script>

<style scoped>
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .CRUD-btn{
    /* position: absolute;
    bottom: 20px;
    left: 20px; */
  }
  .upload-demo{
    margin-bottom: 20px;
  }
  .upload-demo >>> .el-upload-list{
    overflow: hidden;
  }
  .upload-demo >>> .el-upload-list__item{
    width: 300px !important;
    float: left;
    margin-right: 20px;
  }
</style>

