<template>
  <div id="attribute">
    <div class="header">
      <div class="title">属性设置</div>
      <div>模型:{{ modelName }}</div>
      <div>代码:{{ modelCode }}</div>
      <div class="change-view" @click="goModelView"><a-icon type="swap" /></div>
    </div>
    <div class="button-wrap">
      <a-button type="add" @click="addForm">新增属性</a-button>
      <a-button type="delete" @click="deleteForm" :disabled="$refs.table&&$refs.table.selectedRows.length<1">删除</a-button>
      <a-button type="view" @click="editForm" :disabled="$refs.table&&$refs.table.selectedRows.length!==1">编辑</a-button>
      <a-button type="work" @click="workingForm('0')" :disabled="$refs.table&&$refs.table.selectedRows.length<1">启用</a-button>
      <a-button type="delete" @click="workingForm('1')" :disabled="$refs.table&&$refs.table.selectedRows.length<1">停用</a-button>
      <a-dropdown-button v-if="false">
        更多操作
        <a-menu slot="overlay" >
          <a-menu-item key="1"> <a-icon type="download" />模型下载</a-menu-item>
          <a-menu-item key="2"> <a-icon type="cloud-upload" />模型导入</a-menu-item>
          <a-menu-item key="3"> <a-icon type="cloud-download" />模型导出</a-menu-item>
        </a-menu>
      </a-dropdown-button>
    </div>
    <div class="table-content">
      <FilterTable
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :total="total"
        @changeParams="changeParams"
      />
    </div>
    <a-modal
      v-model="modalVisible"
      :title="title"
      :footer="null"
      :destroyOnClose="true"
      :width="900"
      @ok="handleOk">
      <FormModelAdd ref="model" @handleOk="handleOk" @getAttribute="getAttribute"/>
    </a-modal>
  </div>
</template>

<script type="text/ecmascript-6">
import { getAttributeApi, removeModel, changeStatus } from '@/api/model/attribute'
import FilterTable from '@/components/filterTable'
import FormModelAdd from './components/FormModelAdd'
const basePath = '/modelView/modelView'
var id = null
var modelName = null
var modelCode = null
	export default {
		beforeRouteEnter(to, from, next) {
			id = to.query.id
			modelName = to.query.modelName
			modelCode = to.query.modelCode
      if (!id) {
				next(
					{ path: basePath,
						query: {
							redirectPath: to.path
						}
					}
				)
      } else {
				next()
      }
		},
		beforeRouteLeave(to, from, next) {
			// 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
			this.$destroy(true)
			next()
		},
		components: {
			FilterTable,
			FormModelAdd
		},
		data() {
			return {
				id: id,
        modelName,
        modelCode,
				dataSource: [],
				total: 0,
        title: '新增属性',
				columns: [
          {
            title: '序号',
            dataIndex: 'attrSorts',
            key: 'attrSorts',
            width: 100,
            customRender: (text, record, index) => {
							return (<span>{++index}</span>)
						}
          },
          {
            title: '排序',
            dataIndex: 'attrSort',
            width: 120,
            key: 'attrSort'
          },
          {
            title: '属性代码',
            dataIndex: 'attrCode',
            key: 'attrCode',
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'customRender'
            },
            ellipsis: true
          },
          {
            title: '属性名称',
            dataIndex: 'attrName',
            key: 'attrName',
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'customRender'
            }
          },
          {
            title: '属性类型',
            dataIndex: 'attrType',
            key: 'attrType',
						customRender: (text, record, index) => {
							if (text === '0') {
								return (<span>字符型</span>)
							} else if (text === '1') {
								return (<span>整数数值型</span>)
							} else if (text === '2') {
								return (<span>日期型</span>)
							} else if (text === '3') {
                return (<span>时间型</span>)
              } else if (text === '4') {
                return (<span>文本型</span>)
              } else if (text === '5') {
                return (<span>小数数值型</span>)
              } else if (text === '6') {
                return (<span>日期时间型</span>)
              } else {
								return (<span class="error">未设定</span>)
							}
						},
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon'
            }
          },
          {
            title: '属性长度',
            dataIndex: 'dataLength',
            key: 'dataLength',
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'customRender'
            }
          },
          // {
          //   title: '数值精度',
          //   dataIndex: 'dataPrecision',
          //   key: 'dataPrecision',
          //   customRender: (text, record, index) => {
					// 		if (text) {
					// 			return (<span>{text}</span>)
					// 		} else {
					// 			return (<span class="error">未设定</span>)
					// 		}
					// 	},
          //   scopedSlots: {
          //     filterDropdown: 'filterDropdown',
          //     filterIcon: 'filterIcon',
          //     customRender: 'customRender'
          //   }
          // },
          // {
          //   title: '是否必填',
          //   dataIndex: 'ifRequired',
          //   key: 'ifRequired',
					// 	customRender: (text, record, index) => {
					// 		if (text === '0') {
					// 			return (<span>必填</span>)
					// 		} else if (text === '1') {
					// 			return (<span>非必填</span>)
					// 		}
					// 	},
          //   scopedSlots: {
          //     filterDropdown: 'filterDropdown',
          //     filterIcon: 'filterIcon',
          //     customRender: 'customRender'
          //   }
          // },
          // {
          //   title: '是否唯一项',
          //   dataIndex: 'ifOnly',
          //   key: 'ifOnly',
          //   customRender: (text, record, index) => {
					// 		if (text === '0') {
					// 			return (<span>唯一</span>)
					// 		} else if (text === '1') {
					// 			return (<span>不唯一</span>)
					// 		}
					// 	},
          //   scopedSlots: {
          //     filterDropdown: 'filterDropdown',
          //     filterIcon: 'filterIcon',
          //     customRender: 'customRender'
          //   }
          // },
          // {
          //   title: '控件类型',
          //   dataIndex: 'ctrlsType',
          //   key: 'ctrlsType',
          //   customRender: (text, record, index) => {
					// 		if (text === '0') {
					// 			return (<span>文本框</span>)
					// 		} else if (text === '1') {
					// 			return (<span>下拉框</span>)
					// 		} else if (text === '2') {
					// 			return (<span>日期选择框</span>)
					// 		} else if (text === '3') {
					// 			return (<span>时间选择框</span>)
					// 		} else {
					// 			return (<span class="error">未设定</span>)
					// 		}
					// 	},
          //   scopedSlots: {
          //     filterDropdown: 'filterDropdown',
          //     filterIcon: 'filterIcon',
          //     customRender: 'customRender'
          //   }
          // },
          // {
          //   title: '数据源',
          //   dataIndex: 'dataSource',
          //   key: 'dataSource',
          //   customRender: (text, record, index) => {
					// 		if (text) {
					// 			return (<span>{text}</span>)
					// 		} else {
					// 			return (<span class="error">未设定</span>)
					// 		}
					// 	}
          // },
          // {
          //   title: '编码规则',
          //   dataIndex: 'codingIstrue',
          //   key: 'codingIstrue',
          //   customRender: (text, record, index) => {
					// 		if (text === '0') {
					// 			return (<span>已编码</span>)
					// 		} else {
					// 			return (<div class="null"></div>)
					// 		}
					// 	}
          // },
          {
            title: '数据表状态',
            dataIndex: 'tableattrStatus',
            key: 'tableattrStatus',
            customRender: (text, record, index) => {
							if (text === '0') {
								return (<span style="color:#00F946">已创建</span>)
							} else if (text === '1') {
								return (<span style="color:#f03e3e">未创建</span>)
							} else if (text === '2') {
								return (<span style="color:#f03e3e">已变更未同步</span>)
							} else {
								return (<span class="error">未设定</span>)
							}
						}
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            // fixed: 'right',
            customRender: (text, record, index) => {
              if (text === '0') {
                return (<span>启用</span>)
              } else if (text === '1') {
                return (<span>停用</span>)
              }
            },
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon'
            }
          }
        ],
        params: {
          pageSize: 10,
          pageNum: 1
        },
				modalVisible: false
			}
		},
		mounted() {
			// this.getAttribute()
		},
		methods: {
      changeParams(key, value) {
        this.$set(this.params, key, value)
      },
			getAttribute() {
				getAttributeApi({ modelId: id, ...this.params }).then((res) => {
					if (res.code === 200) {
						this.total = res.total
						this.dataSource = res.rows
					}
				})
			},
      removeModel(selectIdMap) {
        removeModel(selectIdMap).then((res) => {
          if (res.code === 200) {
            this.getAttribute()
            if (res.flag === '0') {
              this.$message.info('批量删除成功')
            } else {
              this.$message.error('仅未创建状态的属性可以删除')
            }
          }
        })
      },
      changeStatus(data) { // 批量启用停用接口
        changeStatus(data).then((res) => {
          if (res.code === 200) {
            this.getAttribute()
            if (res.flag === '0') {
              this.$message.info('操作成功')
            } else {
              this.$message.error('仅状态为已创建，已变更未同步的属性可以启用/停用操作')
            }
          }
        })
      },
      deleteForm() { // 批量删除
        const selectIdMap = []
        this.$refs.table.selectedRows.map((item) => {
          selectIdMap.push(item.id)
        })
        this.removeModel(selectIdMap)
      },
			addForm() {
				this.modalVisible = true
        this.title = '新增属性'
        setTimeout(() => {
          this.$refs.model.submitType = 'add'
        }, 300)
			},
      workingForm(status) {
        const ids = []
        this.$refs.table.selectedRows.map((item) => {
          ids.push(item.id)
        })
        this.changeStatus({ status, ids })
      },
      editForm() {
        console.log(`$refs.table.selectedRows`, this.$refs.table.selectedRows)
        this.title = '编辑属性'
        const { id } = this.$refs.table.selectedRows[0]
        this.modalVisible = true
        setTimeout(() => {
          this.$refs.model.submitType = 'edit'
          this.$refs.model.dataId = this.$refs.table.selectedRows[0].id
          this.$refs.model.selectedData = this.$refs.table.selectedRows[0]
          this.$refs.model.getAttributeDetail(id)
        }, 300)
      },
			goModelView() {
				this.$router.push(
					{ path: basePath,
						query: {
							redirectPath: this.$route.path
						}
					}
				)
			},
			handleOk() {
				this.modalVisible = false
			}
		},
    watch: {
      params: {
        deep: true,
        immediate: true,
        handler(val) {
          this.getAttribute()
        }
      }
    }
	}
</script>

<style lang="less" scoped>
#attribute{
	// padding: 0 16px;
  padding: 20px;
  min-width: calc(100% - 25%);
  max-width: 100%;
  width: auto;
  // max-width: 100%;
  background: #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
  // padding: 25px 0;
  padding: 20px;
  box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
	.header{
		display: flex;
		align-items: center;
		position: relative;
		padding: 0px 20px;
		&::before{
			content: '';
			width: 4px;
			height: 26px;
			background-color: #3b75f5;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		>div{
			font-size: 18px;
			color: #777;
			margin-right: 14px;
			font-weight: 700;
		}
		.title{
			color: #000;
			font-weight: 700;
			font-size: 20px;
			margin-right: 20px;
		}
		.change-view{
			width: 32px;
			height: 32px;
			background: #fff;
			border-radius: 50%;
			text-align: center;
			line-height: 32px;
			font-size: 1.5em;
			font-weight: 700;
		}
	}
}
.error{
	color: #fa5252;
}

</style>
