<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="mainData.workname"
        :oldFormPath="{edit:'HDrpManagement/serveWorkBillTask/components'}"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20230207132803"
        idname="sa_workpresetid"
        ownertable="sa_workpreset"
        tags=""
        :tabs="[]"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="tags">
      </div>
      <div slot="customOperation" >
      </div>
      <div slot="slot0" >
      </div>
      <div slot="slot1" >
      </div>
    </basicDetails>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils'
export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{}
    }
  },
  components:{
  },
  methods:{
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id":20230207132703,
        "content": {
          "sa_workpresetid": this.$route.query.id
        }
      })
      this.mainData = res.data
      this.changeDataStructure()
      console.log(this.mainData);
      
    },
    changeDataStructure() {
      let that = this
      this.mainAreaData = [
        {
          label:'工作名',
          value:this.mainData.workname
        },
        {
          label:'上传附件',
          value:this.mainData.fileupload ? this.mainData.fileupload == 1 ? '非必填' : '必填' : '无',
          style:function () {
            let style = {}
            switch (that.mainData.fileupload) {
              
              case 0:
                style = {color:'#333333'}
                break;
              case 1:
                style = {color:'green'}
                break;
              case 11:
                style = {color:'red'}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'添加物料',
          value:this.mainData.additem ? this.mainData.additem == 1 ? '非必填' : '必填' : '无',
          style:function () {
            let style = {}
            switch (that.mainData.additem) {
              case 0:
                style = {color:'#333333'}
                break;
              case 1:
                style = {color:'green'}
                break;
              case 11:
                style = {color:'red'}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'上传文本',
          value:this.mainData.textedit ? this.mainData.textedit == 1 ? '非必填' : '必填' : '无',
          style:function () {
            let style = {}
            switch (that.mainData.textedit) {
              case 0:
                style = {color:'#333333'}
                break;
              case 1:
                style = {color:'green'}
                break;
              case 11:
                style = {color:'red'}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'确认项',
          value:this.mainData.confirm_options
        },
        {
          label:'上传合同',
          value:this.mainData.contractupload ? this.mainData.contractupload == 1 ? '非必填' : '必填' : '无',
          style:function () {
            let style = {}
            switch (that.mainData.contractupload) {
              case 0:
                style = {color:'#333333'}
                break;
              case 1:
                style = {color:'green'}
                break;
              case 11:
                style = {color:'red'}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'添加商品',
          value:this.mainData.isadditem ? this.mainData.isadditem == 1 ? '非必填' : '必填' : '无',
          style:function () {
            let style = {}
            switch (that.mainData.isadditem) {
              case 0:
                style = {color:'#333333'}
                break;
              case 1:
                style = {color:'green'}
                break;
              case 11:
                style = {color:'red'}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'添加人员',
          value:this.mainData.addperson ? this.mainData.addperson == 1 ? '非必填' : '必填' : '无',
          style:function () {
            let style = {}
            switch (that.mainData.addperson) {
              case 0:
                style = {color:'#333333'}
                break;
              case 1:
                style = {color:'green'}
                break;
              case 11:
                style = {color:'red'}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'确认是否有偿',
          value:this.mainData.amountpay ? this.mainData.amountpay == 1 ? '非必填' : '必填' : '无',
          style:function () {
            let style = {}
            switch (that.mainData.amountpay) {
              case 0:
                style = {color:'#333333'}
                break;
              case 1:
                style = {color:'green'}
                break;
              case 11:
                style = {color:'red'}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'是否验证工作',
          value:this.mainData.required ? '是' : '否'
        },
        {
          label:'是否签名',
          value:this.mainData.signature ? '是' : '否'
        },
        {
          label:'操作说明',
          value:this.mainData.remarks
        },
      ]
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {
      this.flag = false
      tabIndex = this.$route.query.tabIndex
      this.$router.replace({path:'/serveWorkTaskDetail',query:{id:id,rowindex:rowindex,tabIndex:tabIndex}})
      this.queryMainData(id)
    },
    onSuccess(){
      this.visible = false
      this.queryMainData(this.$route.query.id)
      this.$emit('onSuccess')
    }
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
  },
  created() {
  }
}
</script>

<style scoped>

</style>