<script setup>
import { deepClone } from 'uview-plus'

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:list'])
const inputCHange = (value, index) => {
  const record = deepClone(props.list)
  record[index].remark = value
  emit('update:list', record)
}

const actionSheet = ref({
  show: false,
  index: -1,
  actions: [
    // 正常 润滑 调整 更换 异常待修复  无此项
    { name: '正常', value: 1 },
    { name: '润滑', value: 2 },
    { name: '调整', value: 3 },
    { name: '更换', value: 4 },
    { name: '异常待修复', value: 5 },
    { name: '无此项', value: 6 }
  ]
})
const stateMap = {
  1: '正常',
  2: '润滑',
  3: '调整',
  4: '更换',
  5: '异常待修复',
  6: '无此项'
}
const sheetActionSelect = (item) => {
  actionSheet.value.show = false
  const record = deepClone(props.list)
  record[actionSheet.value.index].state = item.value
  emit('update:list', record)
}
</script>

<template>
  <view class="tab-content">
    <up-cell-group :border="false">
      <up-cell v-for="(item, index) in list" :key="index" :title="item.title">
        <template #label>
          <view color-gray mt-8>{{ item.subtitle }}</view>
          <view f-s-c mt-8>
            备注：
            <up-input
              :model-value="item.remark"
              placeholder="请输入备注"
              @change="inputCHange($event, index)"
            />
            <view
              f-c-c
              ml-30
              color="#4395D5"
              @tap="
                () => {
                  actionSheet.show = true
                  actionSheet.index = index
                }
              "
            >
              {{ stateMap[item.state] }}
              <up-icon name="arrow-down" :color="`${'#4395D5'}`" />
            </view>
          </view>
        </template>
      </up-cell>
    </up-cell-group>

    <up-action-sheet
      :show="actionSheet.show"
      cancel-text="取消"
      :actions="actionSheet.actions"
      @close="actionSheet.show = false"
      @select="sheetActionSelect"
    />
  </view>
</template>

<style>
.tab-content .u-cell__title-text {
  font-size: 32rpx;
  font-weight: 500;
}
</style>
