<template>
  <div>
    <basicLayout
        ref="basicLayout"
        formPath="projectTask"
        tableName="projectTaskTable"
        idName="sa_projtaskmagid"
        :apiId="{query:20221128143904,del:20221128144004}"
        :options="options"
        :detailPath="{
        path:'/projectTaskDetail'
      }"
    >
      <div slot="custom">
      </div>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname === 'important'">
          {{scope.data.column.data.important === 1?'是':'否'}}
        </div>
        <div v-else-if="scope.data.column.columnname === 'partiestype'">
          <div v-if="scope.data.column.data.onparties === 0 && scope.data.column.data.onstage === 0">
            {{'--'}}
          </div>
          <div v-else>
            <span v-for="item in scope.data.column.data.partiestype" :key="item.index">
              <span v-if="item">
                <el-tag type="warning" style="margin-right: 7px;margin-bottom: 7px">{{item}}</el-tag>
              </span>
              <span v-else>--</span>
            </span>
          </div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'stage'">
          <div v-if="scope.data.column.data.onparties === 0 && scope.data.column.data.onstage === 0">
            {{'--'}}
          </div>
          <div v-else>
            <span v-for="item in scope.data.column.data.stage" :key="item.index">
              <span v-if="item">
                <el-tag style="margin-right: 7px;margin-bottom: 7px">{{item}}</el-tag>
              </span>
              <span v-else>--</span>
          </span>
          </div>

        </div>
        <div v-else-if="scope.data.column.columnname === 'projtaskmag_options'" >
          <div v-for="(item,index) in scope.data.column.data.projtaskmag_options" :key="index" >
            <div v-if="index === 0 && scope.data.column.data.projtaskmag_options.length -1  === index" class="option-name-style">
              <span class="text-left">
                {{item.optionname?item.optionname:'--'}}
              </span>

            </div>
            <div v-else-if="index === 0" class="option-name-style-line">
              <span class="text-left">
                {{item.optionname?item.optionname:'--'}}
              </span>
            </div>
            <div v-else-if="scope.data.column.data.projtaskmag_options.length -1  !== index" class="option-name-style-line">
              <span class="text-left">
                {{item.optionname?item.optionname:'--'}}
              </span>
            </div>
            <div v-else class="option-name-style">
              <span class="text-left">
                {{item.optionname?item.optionname:'--'}}
              </span>
            </div>
          </div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'remarks'" >
          <div v-for="(item,index) in scope.data.column.data.projtaskmag_options" :key="index" >
<!--            <el-tooltip class="item" effect="dark" :content="item.remarks" placement="bottom">-->
              <div v-if="index === 0 && scope.data.column.data.projtaskmag_options.length -1  === index" class="remarks-style">
                <span class="text-left">{{item.remarks?item.remarks:'--'}}</span>
              </div>
              <div v-else-if="index === 0" class="remarks-style-line">
                <span class="text-left">{{item.remarks?item.remarks:'--'}}</span>
              </div>
              <div v-else-if="scope.data.column.data.projtaskmag_options.length -1  !== index" class="remarks-style-line">
                <span class="text-left">{{item.remarks?item.remarks:'--'}}</span>
              </div>
              <div v-else class="remarks-style">
                <span class="text-left">{{item.remarks?item.remarks:'--'}}</span>
              </div>
<!--            </el-tooltip>-->

          </div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'score'" >
          <div v-for="(item,index) in scope.data.column.data.projtaskmag_options" :key="index" >
            <div v-if="index === 0 && scope.data.column.data.projtaskmag_options.length -1  === index" class="score-style">
              <span class="text-left">
                {{item.score}}
              </span>
            </div>
            <div v-else-if="index === 0" class="score-style-line">
              <span class="text-left">
                {{item.score}}
              </span>
            </div>
            <div v-else-if="scope.data.column.data.projtaskmag_options.length -1  !== index" class="score-style-line">
              <span class="text-left">
                {{item.score}}
              </span>
            </div>
            <div v-else class="score-style">
              <span class="text-left">
                {{item.score}}
              </span>
            </div>
          </div>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">

      </template>
    </basicLayout>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return {
      options:[]
    }
  },
  methods:{

  }
}
</script>

<style scoped>
  .option-name-style{
    height: 40px;
    line-height: 40px;
    vertical-align: center;
    margin-top:-5px;
    margin-bottom: -5px;
    transform: scale(1.05,1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .option-name-style-line{
    height: 40px;
    line-height: 40px;
    vertical-align: center;
    margin-top:-5px;
    margin-bottom: -5px;
    border-bottom: 1px solid #ebeef5;
    transform: scale(1.05,1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .remarks-style{
    width:100%;
    height: 39px;
    line-height: 39px;
    vertical-align: center;
    margin-top:-5px;
    margin-bottom: -5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: scale(1.05,1)
  }
  .remarks-style-line{
    border-bottom: 1px solid #ebeef5;
    transform: scale(1.05,1);
    width:100%;height: 40px;
    line-height: 40px;
    vertical-align: center;
    margin-top: -5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .score-style{
    height: 40px;
    line-height: 40px;
    vertical-align: center;
    margin-top:-5px;
    margin-bottom: -5px;
    transform: scale(1.05,1)
  }
  .score-style-line{
    height: 40px;
    line-height: 40px;
    vertical-align: center;
    margin-top:-5px;
    margin-bottom: -5px;
    border-bottom: 1px solid #ebeef5;
    transform: scale(1.05,1)
  }
  .text-left{
    margin-left: 8px !important;
  }
</style>