<template>
  <div class="mod-config" v-highlight-container>
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 1px; margin-left: 0px;" >
<!--      <el-form-item :label="'技术参数卡编码'">-->
<!--        <el-input v-model="searchData.oriCodeNo" readonly style="width: 150px"  ></el-input>-->
<!--      </el-form-item>-->
      <el-row :gutter="20">
        <el-col :span="18">
      <el-form-item label="属性模板编码/Template ID">
        <el-input v-model="searchData.propertiesCodeNo" readonly style="width: 150px"></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="refreshBMPageModal()" v-if="(!ifDisableFlag && isAuth('103002:bmSave') && spForm.sp.includes(searchData.username) && baseForm.status === 'spz') || baseForm.status === 'cg' || superAdmin">更新模板</el-button>
        <el-button type="primary" @click="searchTable()">刷新数据</el-button>
        <el-button type="primary" @click="saveTable()" v-if="(!ifDisableFlag && isAuth('103002:bmSave') && spForm.sp.includes(searchData.username) && baseForm.status === 'spz') || baseForm.status === 'cg' || superAdmin">保存数据</el-button>
        <template v-if="defaultValue">
          <el-button v-if="baseForm.status === 'spz' && ((!ifDisableFlag && spForm.sp.includes(searchData.username)) || (superAdmin))" type="primary" :loading="submitLoading" @click="agreeSubmit">同意</el-button>
          <el-button v-if="baseForm.status === 'spz' && (( baseForm.isReject === 'Y' && !ifDisableFlag && spForm.sp.includes(searchData.username)) || (superAdmin))" type="primary" @click="submitDataModal">驳回</el-button>
        </template>
      </el-form-item>
        </el-col>
        <el-col :span="3"><div class="grid-content bg-purple">
          <el-form-item label="当前节点/Status" style="width: 100%">
            <el-input v-model="spForm.nodeName" disabled></el-input>
          </el-form-item>
        </div>
        </el-col>
        <el-col :span="3"><div class="grid-content bg-purple">
          <el-form-item label="当前节点审批人/Authorizer" style="width: 100%">
            <el-input v-model="spForm.sp" disabled></el-input>
          </el-form-item>
        </div>
        </el-col>
      </el-row>
      <div class="rq ">
        <el-table
          :height="height"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="propertiesItemNo"
            header-align="center"
            align="left"
            width="150"
            label="属性编码">
          </el-table-column>
          <el-table-column
            prop="itemDesc"
            header-align="center"
            align="left"
            width="150"
            label="属性名称">
          </el-table-column>
          <el-table-column
            prop="valueTypeDb"
            header-align="center"
            align="center"
            width="80"
            label="数据类型">
            <template slot-scope="scope">
              <span v-if="scope.row.valueTypeDb === 'N'">数字</span>
              <span v-else-if="scope.row.valueTypeDb === 'T'">文本</span>
<!--              <a v-else-if="scope.row.valueTypeDb === 'S'" @click="openNewPage(scope.row.textValue)" >超链接</a>-->
              <a v-else-if="scope.row.valueTypeDb === 'S'" @click="openNewPage(scope.row.textValue)" >超链接</a>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="left"
            min-width="400"
            label="值">
            <template slot-scope="scope">
              <div  v-highlight-container>
              <el-input v-if="scope.row.valueTypeDb === 'T'&&scope.row.valueChooseFlag === 'N'" v-model="scope.row.textValue" style="height: 11px;padding: 0px ;width:98%" class="left-align" allow-create :disabled="ifDisableFlag" ></el-input>
              <div v-if="scope.row.valueTypeDb === 'S'&&scope.row.valueChooseFlag === 'N'"><el-input  v-model="scope.row.textValue" style="height: 11px;padding: 0px ;width:98%" allow-create :disabled="ifDisableFlag"></el-input></div>
              <el-input v-if="scope.row.valueTypeDb === 'N'&&scope.row.valueChooseFlag === 'N'" v-model="scope.row.numValue" type="number" @input="(value) => scope.row.numValue = value.replace(/[^0-9.]/g, '')" class="left-align" style="height: 11px;padding: 0px;width:98%"  allow-create :disabled="ifDisableFlag"></el-input>
              <el-select v-if="scope.row.valueTypeDb === 'T'&&scope.row.valueChooseFlag === 'Y'" v-model="scope.row.textValue" placeholder="请选择" style="height: 11px;padding: 0px " allow-create :disabled="ifDisableFlag">
                <el-option
                  v-for="item in scope.row.availableValueList"
                  :key="index"
                  :label="item.availableValue"
                  :value="item.availableValue">
                </el-option>
              </el-select>
              <el-select v-if="scope.row.valueTypeDb === 'N'&&scope.row.valueChooseFlag === 'Y'" v-model="scope.row.numValue" placeholder="请选择" style="height: 11px;padding: 0px " allow-create :disabled="ifDisableFlag">
                <el-option
                  v-for="item in scope.row.availableValueList"
                  :key="index"
                  :label="item.availableValue"
                  :value="item.availableValue">
                </el-option>
              </el-select>
              <div v-if="scope.row.valueTypeDb === 'S'&&scope.row.valueChooseFlag === 'Y'"> <el-select v-model="scope.row.textValue" placeholder="请选择" style="height: 11px;padding: 0px ;width:98%" allow-create :disabled="ifDisableFlag">
                <el-option
                  v-for="item in scope.row.availableValueList"
                  :key="index"
                  :label="item.availableValue"
                  :value="item.availableValue">
                </el-option>
              </el-select></div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <!-- 提交 -->
    <el-dialog title="驳回" top="30vh" :close-on-click-modal="false" v-drag :visible.sync="submitModalFlag" width="500px">
      <el-form :inline="true" label-position="top">
        <el-form-item :label="'驳回意见'">
          <el-input type="textarea" v-model="rejectOpinion" :rows="3" resize='none' show-word-limit style="width: 479px;height: 30px"></el-input>
        </el-form-item>
      </el-form>
      <el-footer style="height:30px;margin-top: 50px;text-align:center">
        <el-button type="primary" :loading="submitLoading" @click="rejectSubmit">确定</el-button>
        <el-button type="primary" @click="submitModalFlag = false">取消</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>

<script>
  import {
    searchBMPropertiesValue,
    saveBMPropertiesValue,
    refreshBMPageModal,
    searchBMPropertiesHeaderForBM,
    checkUrl,
    tsdBasicInformationSearch,getBMStatusDesc,
    submitChange, // 提交
    getOADetailForBM,
  } from "@/api/sampleManagement/technicalSpecificationList.js"
  import {
    getNodeAuthority, // 获取节点权限
  } from '@/api/changeManagement/changeManagement.js'
  export default {
    components: {

    },
    props:{
      // 审批显示控制
      defaultValue:{
        type:Boolean,
        default:true,
      }
    },
    data() {
      return {
        superAdmin:false,
        height:200,
        searchData: {
          site: '',
          username: this.$store.state.user.name,
          codeNo: '',
          oriCodeNo: '',
          buNo:'',
          type:'',
          propertiesCodeNo:'',
          fieldId:'',
        },
        type:'prepress',
        ifDisableFlag:false,
        tableData:[],
        baseForm:{
          status:'',
          isReject:'',
        },
        spForm:{
          sp:'',
          nodeName:'',
        },
        rejectOpinion: '',
        submitModalFlag: false,
        submitLoading: false
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.height =0.7* window.innerHeight
      })
    },
    methods: {

      // 初始化组件的参数
      init (inData) {
        // if (this.searchData.codeNo != null && this.searchData.codeNo !== '') {
        //   return false;
        // }
        // 初始化参数
        this.searchData = JSON.parse(JSON.stringify(inData))
        if (this.searchData.ifDisableFlag) {
          this.ifDisableFlag = true
        }
        //this.searchData.type= JSON.parse(JSON.stringify(this.type));
        // 刷新表格
        this.$nextTick(()=>{
          // this.searchTable();
          getOADetailForBM(this.searchData).then(({data}) => {
            this.spForm.nodeName = data.row.nodeName
            this.spForm.sp = data.row.sp == null ? '' : data.row.sp
          })
          searchBMPropertiesValue(this.searchData).then(({data}) => {
            this.tableData = data.rows
          })
          searchBMPropertiesHeaderForBM(this.searchData).then(({data}) => {
            // this.searchData.propertiesCodeNo = data.row.propertiesCodeNo;
            this.$set(this.searchData, 'propertiesCodeNo', data.row.propertiesCodeNo)
          })
          tsdBasicInformationSearch(this.searchData).then(({data}) => {
            this.baseForm = data.row
            this.getNodeAuthority(data.row)
          })
          this.$clearHighLight()
        })
      },

      searchTable () {
        getOADetailForBM(this.searchData).then(({data}) => {
          this.spForm.nodeName = data.row.nodeName
          this.spForm.sp = data.row.sp == null ? '' : data.row.sp
        })
        searchBMPropertiesValue(this.searchData).then(({data}) => {
          this.tableData = data.rows
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {}
          })
        })
        searchBMPropertiesHeaderForBM(this.searchData).then(({data}) => {
            // this.searchData.propertiesCodeNo = data.row.propertiesCodeNo;
          this.$set(this.searchData, 'propertiesCodeNo', data.row.propertiesCodeNo)
        })
        tsdBasicInformationSearch(this.searchData).then(({data}) => {
          this.baseForm = data.row
          this.getNodeAuthority(data.row)
        })
        this.$clearHighLight()
      },

      refreshBMPageModal () {
        this.$confirm(`是否刷新至最新模板界面，已填数据会更新到新模板中，若旧属性在新模板中被删除，该条数据会消失。`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          refreshBMPageModal(this.searchData).then(({data}) => {
            if (data && data.code === 0) {
              this.searchTable()
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        })
      },

      saveTable () {
        saveBMPropertiesValue(this.tableData).then(({data}) => {
          if (data && data.code === 0) {
            this.$clearHighLight()
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
            this.$emit("closeModel")
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      },

      openNewPage(url){
        // window.open(this.$store.state.user.bmPicUrl +url);
        let urlIn=url.replaceAll('\\','/')
        if (url === '') {
          this.$alert("链接没有数据！", '错误', {
            confirmButtonText: '确定'
          })
          return false;
        }
        // window.open(url);
        let data={
          url:urlIn
        }
        checkUrl(data).then(({data}) => {
          if (data && data.code === 0) {
            window.open(data.url);
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      },

      // 获取流程的配置权限
      getNodeAuthority (row) {
        getBMStatusDesc(this.searchData).then(({data}) => {
          this.superAdmin = data.superAdmin
          if (data.superAdmin) {
            this.ifDisableFlag = false
            return false
          }
          if (data.status === '已完成' || data.status === '已升版' || data.status === 'Dead') {
            this.ifDisableFlag = true
            return false
          }
          if (data.status === '审批中' || data.status === '草稿') {
            let tempData = {
              site: row.site,
              stepId: row.stepId,
              menuId: '103002'
            }
            getNodeAuthority(tempData).then(({data}) => {
              if (data && data.code === 0) {
                this.ifDisableFlag = true
                let plmStepRoleBaseBm = data.rows.plm_stepRole_base_bm
                let arr = plmStepRoleBaseBm.filter(a => a.fieldId === this.searchData.fieldId)
                if (arr.length > 0) {
                  if (arr[0].updateFlag === 'N') {
                    this.ifDisableFlag = true
                  } else {
                    this.ifDisableFlag = false
                  }
                } else {
                  this.ifDisableFlag = true
                }
              }
            })
          }
        })
      },

      // 同意提交
      agreeSubmit () {
        this.$confirm(`是否确认提交?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let tempData = {
            site: this.searchData.site,
            userName: this.$store.state.user.name,
            codeNo: this.searchData.codeNo,
            menuId: '103002',
            nodeConclusion: 'Y'
          }
          this.submitData(tempData)
        })
      },

      // 打开提交模态框
      submitDataModal () {
        this.rejectOpinion = ''
        this.submitModalFlag = true
      },

      // 驳回提交
      rejectSubmit () {
        this.$confirm(`是否确认驳回?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let tempData = {
            site: this.searchData.site,
            userName: this.$store.state.user.name,
            codeNo: this.searchData.codeNo,
            menuId: '103002',
            nodeConclusion: 'N',
            rejectOpinion : this.rejectOpinion
          }
          this.submitData(tempData)
        })
      },

      submitData (tempData) {

        this.submitLoading = true
        saveBMPropertiesValue(this.tableData).then(({data}) => {
          if (data && data.code === 0) {
            submitChange(tempData).then(({data}) => {
              if (data && data.code === 0) {
                this.searchTable()
                // window.location.reload();
                this.submitModalFlag = false
                this.submitLoading = false
                this.$emit("closeModel")
              } else {
                this.submitLoading = false
                this.$alert(data.msg, '错误', {
                  confirmButtonText: '确定'
                })
              }
            }).catch(()=>{
              this.submitLoading = false
            })
          } else {
            this.submitLoading = false
            this.$message.error(data.msg)
          }
        }).catch(()=>{
          this.submitLoading = false
        })
      },
    },
  }
</script>

<style scoped>
input[readonly] {
  cursor: text;
}
.left-align /deep/ .el-input__inner {
  text-align: left !important;
}
</style>
